jquery - 使用 setTimeout 定期进行自动完成 AJAX 调用？

Question

我想使用 setTimeout 函数，以便最多每 1 秒进行一次 Ajax 调用。

这是我的。这显然是不正确的，但我不确定 setTimeout 函数是如何工作的。

function autoComplete(q, succ)
{

    setTimeout(

    if(q != "") {
        $.ajax({type:"GET",
            url: "php/search.php",
            data: "q="+q,
            success: succ
        });
    }

    , 1000);
}

我认为我应该使用 clearTimeout，这样如果进行另一个调用，它将重置计时器并再等待 1 秒，但是当我尝试实现它时它停止运行该函数。

Answer 1

传递一个...函数:)

使用匿名函数可能如下:

var timeoutId
function autoComplete(q, succ)
{
    if (q) {
        // stop previous timeouts
        clearTimeout(timeoutId)
        timeoutId = setTimeout(function () {
            $.ajax({type:"GET",
                url: "php/search.php",
                data: "q="+q,
                success: succ
            });
         }, 1000);
    }
}

请注意，我将 q 的支票移到了外面。这不会同时运行两个超时，但可能有多个正在进行的请求。为了防止这种情况发生，success 回调需要一个守卫——一个简单的方法就是使用一个计数器。使用 setTimeout 中的 q 检查“当前 q”可能会导致微妙的竞争条件。

var timeoutId
var counter = 0
function autoComplete(q, succ)
{
    if (q) {
        // Increment counter to maintain separate versions
        counter++
        var thisCounter = counter
        clearTimeout(timeoutId)
        timeoutId = setTimeout(function () {
            $.ajax({type:"GET",
                url: "php/search.php",
                data: "q="+q,
                success: function () {
                    // Only call success if this is the "latest"
                    if (counter == thisCounter) {
                       succ.apply(this, arguments)
                    }
                },
            });
         }, 1000);
    }
}

更智能的版本可能会在提交时读取当前值，因为上面的代码总是会滞后一秒...

现在，假设 getQ 是一个函数对象...

var timeoutId
var counter = 0
function autoComplete(getQ, succ)
{
    counter++
    var thisCounter = counter
    clearTimeout(timeoutId)
    timeoutId = setTimeout(function () {
        var q = getQ() // get the q ... NOW
        if (q) {
            $.ajax({type:"GET",
                url: "php/search.php",
                data: "q="+q,
                success: function () {
                    if (counter == thisCounter) {
                       succ.apply(this, arguments)
                    }
                },
            });
         }
     }, 1000);
}

// example usage
autoComplete(function () { return $(elm).val() }, successCallback)

快乐编码。

---

上面没有提到的一件事是可能仍然有多个飞行中的请求(第二个例子中的 guard 只展示了如何“丢弃”旧的响应，而不是如何适本地限制请求)。这可以通过短队列来处理，并防止提交新的 AJAX 请求，直到获得答复或足够的“超时”已过期且请求被视为无效。