jquery - 清除 ajax 查询超时

Question

我正在使用 AJAX 构建一个下拉菜单，并且我想在实际提交之前将用户查询延迟 3 秒。

所以我尝试了这样的事情：

$("#search").keyup(function(){
    clearTimeout(startcounting);
    var startcounting = setTimeout(function() {
            $.get( "mailing_search.php", { query: $("#searchitem").val() } ).done(function( data ) {
                console.log("Query Submitted");
                $("#searchbox").html(data);
            });     
        },3000);
    }
});

这行不通。它不会清除超时。
假设我输入“三星”它运行查询 7 次。

有什么帮助吗？
提前致谢。

Answer 1

我认为问题出在变量范围内。您必须startcounting在函数之外声明。

var startcounting;
$("#search").keyup(function(){
    clearTimeout(startcounting);
    startcounting = setTimeout(function() {
        $.get( "mailing_search.php", { query: $("#searchitem").val() } ).done(function( data ) {
            console.log("Query Submitted");
            $("#searchbox").html(data);
        });     
    },3000);
}

});

Answer 2

正确的做法：http: //jsbin.com/eqUvAYe/5/edit

您正在寻找功能去抖动。

function debounce(el)
{
    var exec;

  $(el).keyup(
  function ( )
    {
        if (exec)
        {
            clearTimeout(exec);
        }
        exec = setTimeout(function ()
        {
           console.log('1');     // put your ajax call here
        }, 3000);
    });

}

debounce($("#search"));

或（没有包装功能）

$("#search").keyup(
    function ()
    {
        var startcounting;
        return function ()
        {
            if (startcounting) clearTimeout(startcounting);
              startcounting = setTimeout(function ()
            {
                console.log('1') //put your ajax here.
            }, 3000);
        }
    }()
);

（再次）阅读您的问题后，这就是您所需要的。无需放置全局变量。

供参考 ：

这种操作有两种方法：

1) 油门功能

2) 功能去抖动。

阅读本书后：第三方javascript：

那里有一段关于：

控制昂贵的调用：throttle 和 debounce 这个问题的解决方案在于两种旨在控制函数调用频率的技术。这些技术——节流和去抖动——通过创建一个包装函数来限制对原始函数的调用

Answer 3

试试下面的。在 keyup 之外声明定时器函数。

startcounting = setTimeout(function() {
        $.get( "mailing_search.php", { query: $("#searchitem").val() } ).done(function( data ) {
            console.log("Query Submitted");
            $("#searchbox").html(data);
        });     
    },3000);
$("#search").keyup(function(){
    clearTimeout(startcounting);

}