Question

这是我在jquery中尝试的那种方法，但出现了一些我无法解决的问题。例如，如果我键入'ff'，然后添加另外两个'ff'，之后会出现太多控制台日志 - 很难解释，但如果运行代码和实验，则会调用太多的console.logs。

$("#search-input").keyup(function () {
        var thisVal = $(this).val();
        if(thisVal!=''){
            function checker (v){
                if($("#search-input").val() !=v){
                    setTimeout(function(){checker($("#search-input").val() )}, 3000);
                }
                else{
                    console.log($("#search-input").val());
                }
            }
            setTimeout(function(){checker(thisVal)}, 3000);

        }
    });

搜索输入只是输入框。我实际上打算做一个ajax调用而不是console.logging，但是如果我能够完成上述工作，那将会让我顺利上路。

Answer 1

或许，一种更简单的方法就是继续推迟检查，直到他们停止输入一段时间。也就是说，如果计时器正在运行，请将其清除并重新安排检查以供日后使用。如果计时器过期（即，用户未在预定时间内在框中键入），则执行检查。三秒钟可能太长了。你可能想要500ms左右。

var timer; // external so it's value is held over all instances of the timer function
$('#search-input').on('keyup',function() {
     if (timer) {
        clearTimeout(timer);
     }
     timer = setTimeout(function() {
         // perform your check
         console.log($('#search-input').val());
     },500);
});

Answer 2

在设置新超时之前，必须清除之前的超时：

var timeout;
$("#search-input").keyup(function () {
    var thisVal = $(this).val();
    if (thisVal) {
        function checker(v) {
            if($("#search-input").val() != v ){
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    checker($("#search-input").val() );
                }, 3000);
            } else {
                console.log($("#search-input").val());
            }
        }
        clearTimeout(timeout);
        timeout = setTimeout(function(){checker(thisVal)}, 3000);
    }
});

键入开始后，每3秒检查一次输入框，直到用户停止输入 - 如何？

2 个答案: