如何正确计时Javascript函数

How to time Javascript Functions right?

本文关键字：Javascript 函数 何正确      更新时间：2023-09-26

我的应用程序出现严重问题。我写了一个"类似脸书"的即时搜索：

有一个：

<input id="theinput" type="text" title="New Search"/>

它出现在我选择我想搜索的类别之后，exp：摇滚，重金属，流行，独立。。。因此，根据我单击的类别，javascript将其名称设置为搜索页面的一个变量，以了解要搜索的表（将每个表作为一个类别）。因此javascript的一部分是：

$('#rockselector').click(function(){
        fadethings();
        $("#resultdiv").html('<span style="color: #fff; font: 12px Verdana, serif; position: relative; left: 20px; top: 20px;">Search a Rock Artist</span>');
        whichselector = "rock";
        soletsgo();
    });
    //-----------------------------------------------
    $('#heavymetalselector').click(function(){
        fadethings();
        $("#resultdiv").html('<span style="color: #fff; font: 12px Verdana, serif; position: relative; left: 20px; top: 20px;">Search a Heavy Metal Artist</span>');
        whichselector = "heavymetal";
        soletsgo();
    });

"fadethings（）"函数将淡出您选择类别的div，并在显示搜索结果和输入的div中淡出：如上所示的"输入"。函数"soletsgo（）"将执行搜索：

        function soletsgo(){
$('#theinput').keyup(function(){
    function searchy(){
    value = escape($('#theinput').val());
    if ( value.length > 0){
    $("#autodatathing").load("../searchmaster.php?word="+value+"&cat="+whichselector+""); }  
    } // End of searchy() function
            setTimeout(searchy,1000);
    }); // End of keyup function
} // End Of Function soletsgo()

问题是，当我键入类似"吉米·亨德里克斯体验"这样的长词时，它会重复搜索，即使我更改类别并搜索其他艺术家，它也会继续进行最后一次搜索，直到每次"keyup"都有结果。我知道这里发生了什么，但不知道该怎么办。有人能帮忙吗？

问题是每次触发keyup事件时都会触发setTimeout。这导致每次按键都会发出ajax请求。

试试这样的东西：

function soletsgo() {
    var timer, jqXHR, input;
    function searchy() {
        var value = escape(input.val());
        if (value.length > 0) {
            // Abort the last ajax request becuase we don't care anymore
            if (jqXHR) jqXHR.abort();
            jqXHR = $.ajax({
                url: "../searchmaster.php",
                data: {
                    "word": value,
                    "cat": whichselector
                },
                success: function(data) {
                    $("#autodatathing").html(data);
                }
            });
        }
    }
    input = $('#theinput').keyup(function() {
        // Clear the timer because they are typing more
        clearTimeout(timer);
        timer = setTimeout(searchy, 1000);
    });
}

首先，不要在keyup事件的回调中定义searchy函数。这不是一个应该定义函数的地方。我总是在用户按下搜索字段中触发搜索功能的键时重置超时，所以它只在用户停止键入时进行搜索。

var searchTimeout = false;
function searchy() {
    var value = escape($('#theinput').val());
    if ( value.length > 0){
        $("#autodatathing").load("../searchmaster.php?word="+value+"&cat="+whichselector+"");    
    }
}
$('#theinput').keyup(function(){
    window.clearTimeout(searchTimeout);
    searchTimeout = setTimeout(searchy, 1000);
}

生成两个全局变量。首先是search_in_progress，如果是TRUE，则不进行搜索。搜索结束时，您将其设置为FALSE，以进行另一次搜索。第二个变量——last_search，它不会让你搜索同一个东西两次。

相关文章：