Question

我有一些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继续重新加载所有按顺序发送的请求。我想拥有它，以便在前一个请求尚未完成时返回最新请求。有关如何做到这一点的任何建议？我想保持这个异步方面。

Answer 1

您无法使用__OUTPUT_FORMAT__执行此操作。您必须使用.load或其中一种速记方法（在这种情况下， .ajax应该）。

所以你需要将Promises添加到数组并用于.get并迭代它并在重新调用函数时中止。

类似这样的事情

when

此外，请勿使用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('')方法可以执行此操作。此外，如果将对象作为参数传递给ajax调用，则默认情况下会对其进行编码（无需手动编码输入）

Answer 2

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

以示例：

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;
    });
}

有帮助吗？

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

2 个答案: