Как правильно рассчитать время работы JavaScript?

Question

У меня серьезная проблема в моем приложении.Я написал мгновенный поиск "как в Facebook":

Существует:

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

, который появляется после того, как я выбираю, какую категорию я хочу найти, exp: rock, heavy metal, pop, инди ... итак, в зависимости от того, какую категорию я нажимаю, 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, который будет показывать результаты поиска и входные данные.: '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()

Проблема в том, что когда я печатаю что-то длинное, например: «Опыт Джими Хендрикса», оно повторяет поиск, даже когда я меняю категорию иищите других исполнителей, которые он продолжает делать в последнем поиске, пока он не достиг своего рода результата для каждого 'keyup'.Я знаю, что здесь происходит, но не знаю, что делать.Кто-нибудь может помочь?

Answer 1

Прежде всего, не определяйте функцию 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 2

Проблема в том, что вы запускаете setTimeout каждый раз, когда срабатывает событие keyup. Это приводит к тому, что при каждом нажатии клавиши выполняется 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 3

Создайте две глобальные переменные. Сначала - search_in_progress, а если TRUE - вы не ищете. По окончании поиска вы установите его на FALSE, чтобы разрешить другой поиск. Вторая переменная - last_search, которая не позволит вам искать одну и ту же вещь дважды.