Задержка Jquery между функциями Keyup - PullRequest
Новая
       3

Задержка Jquery между функциями Keyup

3 голосов
/ 03 декабря 2010

У меня есть немного кода, который я пишу, пытаясь интегрировать API поиска bing на моем сайте с мгновенными результатами поиска.Я использую функцию keyup в jquery для отправки данных в мой серверный скрипт, который затем получает XML-файл bing search и показывает результаты.

Меня беспокоит то, что я буду совершать слишком много ненужных обращений к моим скриптам,Может кто-нибудь, пожалуйста, посмотрите на это и скажите мне, как я могу поместить задержку в 1 секунду между keyups как таймер?поэтому он будет обновлять результаты только каждые одну секунду или около того?

Это то, что я создал до сих пор, но я не знаю, правильно ли это ??? 

<script type="text/javascript">
var delay = (function() {

    var timer = 0;

    return function(callback, ms) {

        clearTimeout(timer);

        timer = setTimeout(callback, ms);

    };

})();



function reloadsearch() {
    var searchterms = $('#q').val();
    if (searchterms.length >= 3) {
        delay(function() {
            var data = 'source=ajax&q=' + searchterms;
            $.ajax({
                type: "GET",
                url: "results/",
                data: data,
                success: function(html) {
                    if (html !== '') {
                        $("#search-results").html(html);
                        $("#search-results").fadeIn(500);
                    }
                }
            });
        }, 250);
    }

    else

    {
        $("#search-results").fadeOut(250);
    }
};



$('#q').keyup(function() {
    reloadsearch()
});

$(document).ready(function() {
    reloadsearch()
});

Ответы [ 3 ]

5 голосов
/ 04 декабря 2010

Вот пример поля ввода, принимающего ввод и выполняющего поиск с меньшей скоростью, чем при наборе.

http://jsbin.com/ebela4/8/edit

Этот пример не делает Ajax, но вы поймете идею. Попробуйте ввести текст как можно быстрее. Это обновит окно поиска с задержкой. Он помнит, что состояние «грязное», а затем обновляет при необходимости.

Надеюсь, это поможет вам.

Bob

1 голос
/ 04 декабря 2010

Вот пример, похожий на поиск Google.Поиск не будет выполняться до тех пор, пока пользователь не приостановит набор текста.

http://jsfiddle.net/WNX5q/

1 голос
/ 03 декабря 2010

Я буду делать что-то вроде этого 

    var delay = false;
$('#q').keyup(function() {

if(!delay){
    delay = true;
    reloadsearch().delay(1000);
    delay = false;
});

логически это должно работать, но я не пробовал!синтаксис может потребовать некоторых изменений.

и вот код мира, который, надеюсь, поможет вам в этом;) 

$(document).ready(function(){

function reloadsearch() {
    var searchterms = $('#q').val();
    if (searchterms.length >= 3) {

            var data = 'source=ajax&q=' + searchterms;
            $.ajax({
                type: "GET",
                url: "results/",
                data: data,
                success: function(html) {
                    if (html !== '') {
                        $("#search-results").html(html);
                        $("#search-results").fadeIn(500);
                    }
                }
            });
       }

    else

    {
        $("#search-results").fadeOut(250);
    }
};

var delayOn = false;
$("#test").click(function(){
if(!delayOn){
delayOn = true;
reloadsearch().delay(2000).queue(function(){delayOn = false;$(this).dequeue();});
        }
                  });
                 });
...