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);
    }
});

这不起作用。它不会清除超时。
假设我输入“samsung”它运行查询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）功能debounc。

阅读完本书后：Third party javascript：

有一节关于：

控制昂贵的电话：节流和去抖解决方案这个问题在于两种技术，旨在控制你的频率函数被调用。这些技巧 - 节流和去抖 - 工作创建一个包装函数，限制对原始的调用功能

enter image description here

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);

}

清除ajax查询的超时

3 个答案: