Question

以下是我的脚本。这是一个自我提供搜索脚本。问题是它通过大量请求渗透到服务器（它在每个插入的字符后发送请求）。

我需要更改脚本，以便在用户完成输入后等待2秒（并且已插入至少3个字符），然后才将请求发送到php文件。

(function($){
$.fn.fsearch = function(){
  var $searchInput = $(this);
  $searchInput.after('<div id="divResult"></div>');
  $resultDiv = $('#divResult');
  $searchInput.focus();
  $searchInput.addClass('searchi');
  $resultDiv.html("<ul></ul><div id='search-footer' class='searchf'></div>");
  $searchInput.keyup(function(e) {
  var q=$(this).val();
if(q.length>2&&q.length<30){ 
      var current_index = $('.selected').index(),
      $options = $resultDiv.find('.option'),
      items_total = $options.length;
      $resultDiv.fadeIn();
      $resultDiv.find('#search-footer').html("<img src='img/loader.gif' alt='Searching...'/>");

      $.getJSON("/search.php",{searchword: q},function(jsonResult) { 
        var str='';
        for(var i=0; i<jsonResult.length;i++)
          {
            str += '<li id=' + jsonResult[i].uid + ' class="option"><img class="profile_image" src="photos/'+jsonResult[i].media+'" alt="'+jsonResult[i].username+'"/><span class="name">' + jsonResult[i].username + '</span><br/>'+jsonResult[i].country+'</li>';
          }
          $resultDiv.find('ul').empty().prepend(str);
          $resultDiv.find('div#search-footer').text(jsonResult.length + " results found...");
          $resultDiv.find('ul li').first().addClass('selected');
      }); 

        $resultDiv.find('ul li').live('mouseover',function(e){
        current_index = $resultDiv.find('ul li').index(this);
        $options = $resultDiv.find('.option');
        change_selection($options,current_index);
      });


      function change_selection($options,current_index){
        $options.removeClass('selected');
        $options.eq(current_index).addClass('selected');
        }

    } else{

      $resultDiv.hide();
    }
  });    

  jQuery(document).live("click", function(e) { 
    var $clicked = $(e.target);
    if ($clicked.hasClass("searchi") || $clicked.hasClass("searchf")){
    }
    else{
      $resultDiv.fadeOut(); 
    }
  });

  $searchInput.click(function(){
    var q=$(this).val();
    if(q.length>2&&q.length<30) { 
      $resultDiv.fadeIn();
    }
  });

  $resultDiv.find('li').live("click",function(e){ 
    var id = $(this).attr('id');
    var name = ($(this).find('.name').text());
    $searchInput.val(name);
  });

  };
})(jQuery);

阅读this question后，我在脚本中添加了以下解决方案：

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

不幸的是，它不起作用：

TypeError: e.nodeName is undefined jquery-1.11.0.min.js:4:9004

Jquery：在发送json请求之前延迟2秒

0 个答案: