Question

我的应用中存在严重问题。我写了一个“喜欢facebook”的即时搜索：

有一个：

<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（）'函数将fadeOut你选择哪个类别的div，它将淡入div，它将显示搜索结果和输入：'theinput'，如上所示。函数'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()

问题在于，当我输入类似“Jimi Hendrix Experience”之类的东西时，它会重复搜索，即使我更改类别并搜索其他艺术家，它仍会继续进行最后一次搜索，直到它达到每个搜索结果为止。 'KEYUP'。我知道这里发生了什么，但是，不知道该怎么做。有人可以帮忙吗？

Answer 1

问题是每次触发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);
    });
}

Answer 2

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

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

Answer 3

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

如何计算Javascript功能对吧？

3 个答案: