Question

我尝试根据输入字段创建图像。在服务器上创建的映像，我通过异步调用获取它，并且必须在输入字段中的每个键盘之后生成它。如果用户在前一次呼叫未完成时按下另一个键，则必须停止此呼叫。第一次通话结束后，必须调用此堆叠。重点是，如果用户在第一次呼叫未完成时击中了大量的键，则只需要调用最后一次。

I created a fiddle，我使用settimeout函数模拟异步调用。我无法弄清楚，为什么它不起作用。

var isRequestInProgress = false;
var nextRequest = null;

var submit = function(content) {
    console.log('isRequestInProgress: ' + isRequestInProgress);  // It should be true in the second turn
    if (isRequestInProgress === true) {
        nextRequest = content;
        return false;
    }
    isRequestInProgress = true;
    setTimeout(function() {
        isRequestInProgress = true;
        if (nextRequest !== null) {
            submit(nextRequest);
        }

        nextRequest = null;
        isRequestInProgress = false;
    }, 2000);
};

$('button').click(function() {
    isRequestInProgress = false;
    submit($(this).text());
});

如果我在2分钟内按下一个接一个按钮，isRequestInProgress应该是真的。但这是假的，我不知道，为什么......

如果您知道原因，或者您有更好的解决方案来解决这个问题，我很乐意听到它！提前谢谢！

Answer 1

假设您正在使用setTimeout，请在提交

之前使用clearTimeout清除计时器

http://jsfiddle.net/27gmpjj2/1/

如果您使用的是Ajax，请按照seva.rubbo的建议使用abort()

http://jsfiddle.net/27gmpjj2/2/

如果您只想在最后一个按钮上提交ajax请求，则可以使用setTimeout方法。这将延迟请求，直到我们确定用户已停止按下按钮。

http://jsfiddle.net/27gmpjj2/5/

Answer 2

如果我做对了：

var isRequestInProgress = false,
    timeout;

var submit = function(content) {

    if (isRequestInProgress === true) {
        clearTimeout(timeout);
    }

    isRequestInProgress = true;

    timeout = setTimeout(function() {
        console.log('content: ' + content); 
        isRequestInProgress = false;
    }, 2000);
};

$('button').click(function() {
    submit($(this).text());
});

使用.abort()对象的XMLHttpRequest方法停止AJAX请求。

收集异步调用并提交最后一个

2 个答案: