Проблема с задержкой ajax в форме поиска

Question

Я пытаюсь установить тайм-аут для моей функции ajaxGet, как показано на рисунке here.

Без кода, который я нашел у меня есть:

$('#search').on('keyup', function() { 
    var query; 
    query = $(this).val(); 
    ajaxGet('{% url "distributors:search_dist" %}', { 
     'query': query 
    }, function(content) { 
     $('#distributors').html(content); 
     // alert(content); 
     set_favorite(); 
    }) 
}); 

И это работает хорошо.

После я реализовал решение для задержки у меня есть:

var delay = (function() { 
    var timer = 0; 
    return function(callback, ms) { 
     clearTimeout(timer); 
     timer = setTimeout(callback, ms); 
    }; 
})(); 
$('#search').keyup(function() { 
    delay(function() { 
     var query; 
     query = $(this).val(); 
     ajaxGet('{% url "distributors:search_dist" %}', { 
      'query': query 
     }, function(content) { 
      // $('#distributors').html(content); 
      alert(content); 
      set_favorite(); 
     }) 
    }, 1000); 
}); 

Но это не работает. Я считаю, что проблема заключается в JS, потому что он даже не запускает ajaxGet() ...

Любые идеи, что я делаю неправильно?

Answer 1

Вы можете создать SetTimeout в рамках мероприятия, как:

$('#search').keyup(function() { 
    window.setTimeout(function(){ 
var query; 
     query = $(this).val(); 
     ajaxGet('{% url "distributors:search_dist" %}', { 
      'query': query 
     }, function(content) { 
      // $('#distributors').html(content); 
      alert(content); 
      set_favorite(); 
     }) 
},1000); 
}); 

Answer 2

Я не очень хорошо знаком с JS, но я нашел мою проблему:

мне пришлось заменить query = $(this).val(); с query = $('#search').val();