清除 ajax 查询超时答案

【问题标题】：Clearing timeout for ajax query清除 ajax 查询超时
【发布时间】：2013-12-30 07:48:15
【问题描述】：

我正在使用 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);
    }
});

这不起作用。它不会清除超时。
假设我输入“samsung”，它会运行 7 次查询。

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

【问题讨论】：

由于 javascript 提升属性，开始计数未定义
那么有解决办法吗？

标签： jquery ajax settimeout cleartimeout

【解决方案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);
}

});

【讨论】：

为这种简单的操作污染全局范围是非常糟糕的。
什么意思？它只是一个变量
@NirTzezana 这不是重点。阅读我的第二个答案。我附上了参考资料。尽量避免全局变量。你永远不知道谁会改变他们。

【解决方案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) 函数去抖动。

读完书：Third party javascript：

那里有一段关于：

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

【讨论】：

【解决方案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);

}

【讨论】：