Javascript 取消以前的异步.load（）请求

我有一些javascript代码，如下所示：

function updateResults() {
    var user_input = $('input:text').val();

    user_input = encodeURIComponent(user_input);

    div1.html('').load(cog_url); // Just displays a spinning cog while results load
    div2.html('').load(cog_url); // Just displays a spinning cog while results load
    div3.html('').load(cog_url); // Just displays a spinning cog while results load

    $.when(
        div1.html('').load("api/method1?input=" + user_input),
        div2.html('').load("api/method2?input=" + user_input),
        div3.html('').load("api/method3?input=" + user_input)
    ).done(function () {
        return true;
    });
}

---

API方法只返回HTML，其中包含要在目标div中呈现的所需结果。这一切都运行得比较好，但当我多次向系统提交请求时，之前的请求不会被取消，因此我会收到一系列响应，并且div会不断重新加载按顺序发送的所有请求。我想要它，以便在前一个请求尚未完成时只返回最新的请求。关于如何做到这一点，有什么建议吗？我想保留这个异步方面。

您可以添加一种标志来确定它是否是最后一个请求吗

举例来说：

function updateResults(isLastRequest) {
    var user_input = $('input:text').val();

    user_input = encodeURIComponent(user_input);

    div1.html('').load(cog_url); // Just displays a spinning cog while results load
    div2.html('').load(cog_url); // Just displays a spinning cog while results load
    div3.html('').load(cog_url); // Just displays a spinning cog while results load

    $.when(
        if(isLastRequest){
            div1.html('').load("api/method1?input=" + user_input),
            div2.html('').load("api/method2?input=" + user_input),
            div3.html('').load("api/method3?input=" + user_input)

        }
    ).done(function () {
        return true;
    });
}

---

它有帮助吗？

你不能用

加载
。您必须使用
.ajax
或其中一种速记方法（在本例中，
.get
应该这样做）

因此，您需要将承诺添加到数组中，并在
时用于
，并且在重新调用函数时对其进行迭代和中止

像这样的

var calls = [];
function updateResults() {
    var user_input = $('input:text').val(),
        apiQuery = {input: user_input};

    div1.empty().load(cog_url); // Just displays a spinning cog while results load
    div2.empty().load(cog_url); // Just displays a spinning cog while results load
    div3.empty().load(cog_url); // Just displays a spinning cog while results load

    calls.forEach(function(call){call.abort();});
    calls = [];
    calls.push( $.get('api/method1',apiQuery) );
    calls.push( $.get('api/method2',apiQuery) );
    calls.push( $.get('api/method3',apiQuery) );

    $.when.apply($, calls).done(function (result1, result2, result3) {
        div1.html(result1);
        div2.html(result2);
        div3.html(result3);

        return true;
    });
}


另外，不要使用
.html（“”）
，有一个
.empty（）
方法可以做到这一点。另外，如果将对象作为参数传递给ajax调用，则默认情况下会对其进行编码（无需手动编码输入）
可能需要在中止后清空调用数组？我最后执行了
calls.push（$.get（'api/method1'，apiQuery）.done（函数（result1）{div1.html（result1）；}）
这样其他组件就不会等待彼此的结果，因为它们的时间并不相同。谢谢你的帮助！显然，.get（）在默认情况下是异步的。@DamianJ所有ajax调用在默认情况下都是异步的（ajax中的第一个A表示异步）。是的，如果您需要它们在加载时显示，而不是等待全部加载，那么您做的是正确的。