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

Question

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

这就是我所拥有的.这显然不正确,但我不确定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回调需要一个警卫 - 一个简单的方法是使用计数器.检查"当前Q"与q在setTimeout可能导致微妙的竞争条件.

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)

快乐的编码.

需要考虑的一点是,上面没有解决,可能仍有多个飞行中的请求(第二个示例中的警卫只显示如何"抛弃"旧的响应,而不是如何适当地限制请求).这可以通过短队列处理并防止提交新的AJAX请求,直到获得答复或足够的"超时"已到期并且该请求被视为无效.