javascript - jQuery keyUp/AJAX 获取组合总是落后 1 或 2 笔画

Question

我建立了一个very simple Twitter Instant Search为了好玩，使用 jQuery 和 PHP。我将一个事件绑定(bind)到搜索表单上的 keyup，并对 PHP 页面进行快速 AJAX 调用，以 curl Twitter 搜索 JSON。

<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);    
        });

    });
});