Имитируйте Google с помощью «Jquery delay» и «fadeOut»

Question

У меня есть этот кусок кода:

$(input).keyup(function() {

    var searchTerms = getSearch();
          doSearch(searchTerms); 

}); 

Функция doSearch дает мне список результатов (результаты поиска). Я хотел бы имитировать Google, «затухая» в результатах на keyup, затем устанавливая таймер или событие .delay, а затем выполняю функцию, которая предоставляет результаты, так:

1. keyup -> затухание 50%
2. ждать период времени
3. сделать функцию doSearch(searchTerms);

Я знаю, как проводить события, но, похоже, не могу соединить их все вместе.

Answer 1

jQuery имеет две вещи для решения этой проблемы.

.delay ()

и

jQuery.queue ()

Если вы хотите отложить, например, функцию триггера, вам нужно либо поставить ее в очередь fx-очереди, либо в отдельной очереди.Вот как это работает:

$("#myElement").delay(2000).queue(function(){ 
  var searchTerms = getSearch();
  doSearch(searchTerms); 
  $(this).dequeue(); 
});

Если вы не хотите использовать fx-очередь по умолчанию, вот как поставить функцию в очередь в вашей собственной очереди:

$("#myElement").delay(2000, "myQueue").queue("myQueue", function(){ 
  var searchTerms = getSearch();
  doSearch(searchTerms); 
}).dequeue("myQueue");

Answer 2

Используйте jQuery's fadeTo: http://api.jquery.com/fadeTo/ и JS '* * * * для этого.Немного похоже:

$('#myInput').keyup(function(){
   $('.stuffToFade').fadeTo('fast',0.5,function(){ //fade all '.stuffToFade' elements to 0.5 and execute the following callback
      setTimeout(function(){ //the following function will be executed after 500ms
         var searchTerms = getSearch();
         doSearch(searchTerms);
      }, 500); //this is where the delay is set
   });
});

Answer 3

функция для обработчика кликов:

$(this).click(function(){
   doSomeFunction(variable);
});

ИЛИ пользовательское событие:

$(this).doSearch(function(searchTerms){
    getyourSearchOn();
});