JQuery KeyUp / AJAX получить комбо всегда 1 или 2 ударов позади

Question

Я построил очень простой Twitter Instant Search для развлечения, используя jQuery и PHP. Я связываю событие с keyup в форме поиска и делаю быстрый вызов AJAX на страницу PHP, которая скручивает JSON в Twitter Search.

<script>
$(function(){
 $('#search').bind('keyup', function(){
  var v = $('#search').val();
  console.log(v);
  $.get('get.php',{q: v, a:''}, function(data){
   obj = {};
   window.tw = '';
    obj = eval('('+ data +')');
  if(typeof obj.results.length !== undefined){
    for (var i=0; i < obj.results.length; i++) {
     tw += '<div class="tweet"><h2><a target="_blank" href="http://twitter.com/'+obj.results[i].from_user+'">@'  + obj.results[i].from_user + '</a></h2> <span>' + obj.results[i].text + '</span><' + '/div>';
    };
    }
   });
 $('#container').html(window.tw);  
 });

});
</script> 

Несмотря на то, что возвращаемое значение console.log верное, оно по-прежнему отстает на 1-2 символа с точки зрения отображаемых результатов. Зачем? Как я могу это исправить?

Answer 1

$('#container').html(window.tw); 

Это должно быть внутри обратного вызова, данного $ .get ()

$(function(){
    $('#search').bind('keyup', function(){
        var v = $('#search').val();
        console.log(v);
        $.get('get.php',{q: v, a:''}, function(data){
            obj = {};
            window.tw = '';
                        obj = eval('('+ data +')');
                        if(typeof obj.results.length !== undefined){
                for (var i=0; i < obj.results.length; i++) {
                    tw += '<div class="tweet"><h2><a target="_blank" href="http://twitter.com/'+obj.results[i].from_user+'">@'  + obj.results[i].from_user + '</a></h2> <span>' + obj.results[i].text + '</span><' + '/div>';
                };
            }
            $('#container').html(window.tw);    
        });

    });
});

Answer 2

Вы уверены, что проблема не в части процесса get.php?

редактировать

Ах, я думаю, что заметил проблему. Я думаю, что звонок на

 $('#container').html(window.tw); 

Должен быть в обратном вызове $ .get success, а не в функции события keyup - так как он срабатывает до того, как $ .get что-то возвратил, поэтому вместо него отображается последний набор ответов. Поиск по одной букве не дает результатов.

Answer 3

Похоже, вы отправляете запрос AJAX немедленно. После этого код становится асинхронным, то есть он может возвращаться в любом порядке в зависимости от задержки. Если результаты возвращают исходный поисковый термин, вы можете выполнить сопоставление, чтобы убедиться, что возвращаемые результаты по-прежнему совпадают с данными в окне поиска.