Question

我在Javascript上有点像菜鸟，正在编写一个“autoresult”脚本，可以在用户输入时自动获取结果。但是，由于PHP后端很慢，我希望脚本检查并查看自上次密钥以来是否已经过了1秒。这样，除非用户输入完成，否则不会调用PHP后端。我的想法是使用setTimeout和clearTimeout来处理这个问题。但是，我的脚本不起作用。以下是调用脚本的输入：

<input type="text" id="inputbox" onkeyup="lookup_input(this.value,0);" />

“0”是用于检查是否已设置超时的标志。这是脚本：

var timeOut1;

function showQuery(input_myinput2) {    
    $.post("mybackendfile.php", {queryString: input_myinput2}, function(data){
        if(data.length >0) {
        $('#mydiv').html(data); //php backend stuff, don't worry about this
        }
    });
}               
function lookup_input(input_myinput,flag) {
    if(input_myinput.length == 0) {
        $('#mydiv').hide(); //check to see if there is an input, and if not, hide the div that displays autoresults
    } 
    else {   
              //the flag checks to see if the Timeout has been set

        if(!flag) { 
            timeOut1 = setTimeout(function(){showQuery(input_myinput)}, 1000);
            //change the flag to "1" so that if another key is pressed it will throw the else statement, and if the key is pressed soon enough, it will clear the Timeout
            $('#inputbox').onkeyup('lookup_input(this.value,1)');       
            $('#mydiv').show();
            $('#mydiv').html('Searching... ');
        }
        else { //if timeout has been set then and next key has been pressed
            clearTimeout(timeOut1);
            $('#mydiv').html('Searching... ');
            timeOut1 = setTimeout(function(){showQuery(input_myinput)}, 1000);  
        }
    }
}

有关如何正确访问showQuery函数以及如何使此脚本工作的任何建议？另外，除了使用setTimeout / clearTimeout之外，还有另外一种做autoresult失速的建议吗？谢谢！

Answer 1

Underscore.js提供了一个整洁的debounce函数，可以抽象出这个（通常需要的）特征。

了解annotated source code如何实施。

Answer 2

你真的不需要旗帜。事件处理程序应始终清除超时并开始新的超时。

现在你已经得到它的方式，你为输入元素添加另一个冗余事件处理程序。

我还认为你应该将显示“搜索...”消息的代码移动到里面的超时代码中，因为在实际显示它之前1秒显示它会有点误导开始搜索。

setTimeout，clearTimeout和javascript的复杂问题

2 个答案: