按钮点击时为GET请求添加延迟的实现问题

我用jQuery实现按钮点击触发一系列API GET请求，需要在部分请求之间添加短延迟，但尝试delay(500)或sleep(500)都没效果。

原代码示例 #

$('#VideoPlay1921').click(function() {
    var videoname = 'Video.mp4';
    $.get("http://10.6.18.228:8088/API/?Function=AudioBusOn&Value=M&Input=" + videoname);
    $.get("http://10.6.18.228:8088/API/?Function=AudioChannelMatrixApplyPreset&Value=Video&Input=" + videoname);
    $.get("http://10.6.18.228:8088/API/?Function=Restart&Input=" + videoname);
    $.get("http://10.6.18.228:8088/API/?Function=SetVolume&Value=75&Input=" + videoname);
    // 需要延迟
    $.get("http://10.6.18.228:8088/API/?Function=Play&Input=" + videoname);
    $.get("http://10.6.18.228:8088/API/?Function=ActiveInput&Input=" + videoname);
});

$('#L3In2019').click(function() {
    var topline = 'BOTHWELL MIDDLE SCHOOL';
    var bottomline = 'MARQUETTE';
    var singleline = '';
    $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Single In.Text&Value=" + singleline);
    $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Single Out.Text&Value=" + singleline);
    $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Top In.Text&Value=" + topline);
    $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Top Out.Text&Value=" + topline);
    $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Bottom In.Text&Value=" + bottomline);
    $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Bottom Out.Text&Value=" + bottomline);
    // 需要延迟
    $.get("http://10.6.18.228:8088/API/?Function=TitleBeginAnimation&Value=TransitionIn&Input=L3");
});

无效的尝试代码 #

// 尝试1：在get后链式调用delay
$.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Bottom In.Text&Value=" + bottomline).delay(500);

// 尝试2：先delay再调用get
$.delay(500).get("http://10.6.18.228:8088/API/?Function=TitleBeginAnimation&Value=TransitionIn&Input=L3");
});

可行解决方案 #

为什么之前的方法无效？

jQuery的delay()方法仅适用于动画队列（比如fadeIn()、slideUp()这类动画），无法用来延迟普通AJAX请求或JS代码执行。而浏览器原生JS中并没有sleep()方法，强行模拟会阻塞主线程，导致页面卡顿。

方案1：使用setTimeout()（固定延迟）

这是最直接的方式，把需要延迟执行的请求放在setTimeout的回调函数中，指定延迟时间即可。

修改后的代码示例：

$('#VideoPlay1921').click(function() {
    var videoname = 'Video.mp4';
    $.get("http://10.6.18.228:8088/API/?Function=AudioBusOn&Value=M&Input=" + videoname);
    $.get("http://10.6.18.228:8088/API/?Function=AudioChannelMatrixApplyPreset&Value=Video&Input=" + videoname);
    $.get("http://10.6.18.228:8088/API/?Function=Restart&Input=" + videoname);
    $.get("http://10.6.18.228:8088/API/?Function=SetVolume&Value=75&Input=" + videoname);

    // 延迟500ms后执行后续请求
    setTimeout(function() {
        $.get("http://10.6.18.228:8088/API/?Function=Play&Input=" + videoname);
        $.get("http://10.6.18.228:8088/API/?Function=ActiveInput&Input=" + videoname);
    }, 500);
});

$('#L3In2019').click(function() {
    var topline = 'BOTHWELL MIDDLE SCHOOL';
    var bottomline = 'MARQUETTE';
    var singleline = '';
    $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Single In.Text&Value=" + singleline);
    $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Single Out.Text&Value=" + singleline);
    $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Top In.Text&Value=" + topline);
    $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Top Out.Text&Value=" + topline);
    $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Bottom In.Text&Value=" + bottomline);
    $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Bottom Out.Text&Value=" + bottomline);

    // 延迟500ms后执行动画请求
    setTimeout(function() {
        $.get("http://10.6.18.228:8088/API/?Function=TitleBeginAnimation&Value=TransitionIn&Input=L3");
    }, 500);
});

方案2：基于Promise链式调用（确保前置请求完成后再延迟）

如果需要等待所有前置API请求完成后再执行延迟（避免网络波动导致请求顺序混乱），可以利用$.get返回的Promise对象，结合$.when()和setTimeout实现：

修改后的#L3In2019点击事件示例：

$('#L3In2019').click(function() {
    var topline = 'BOTHWELL MIDDLE SCHOOL';
    var bottomline = 'MARQUETTE';
    var singleline = '';

    // 用$.when等待所有SetText请求完成
    $.when(
        $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Single In.Text&Value=" + singleline),
        $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Single Out.Text&Value=" + singleline),
        $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Top In.Text&Value=" + topline),
        $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Top Out.Text&Value=" + topline),
        $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Bottom In.Text&Value=" + bottomline),
        $.get("http://10.6.18.228:8088/API/?Function=SetText&Input=L3&SelectedName=L3 Bottom Out.Text&Value=" + bottomline)
    ).then(function() {
        // 返回一个延迟500ms的Promise
        return new Promise(resolve => setTimeout(resolve, 500));
    }).then(function() {
        // 延迟后执行动画请求
        $.get("http://10.6.18.228:8088/API/?Function=TitleBeginAnimation&Value=TransitionIn&Input=L3");
    });
});

内容的提问来源于stack exchange，提问作者DRog