keyup 事件，每輸入一個字就請求一次...

Question

$("#search").on('keyup',function (e) {
  e.preventDefault();

  if($(this).val().length > 0){

    $.ajax({
      type: "GET",
      url: "search",
      data: 'search='+$('#searchbar').val(),
      success: function(data){
      
          $('#search-result-display').html(data);

      }
    });

  }
});

我現在遇到一個問題
雖然我有加入 if($(this).val().length > 0){
但是假設有五個字
他會發出請求五次。。。
等於是我會看到 search-result-display 這邊會動五次。。。
請問有什麼方式可以改善這個情形嗎？

Answer 1

设置一个延迟，如果在一定时间之内没有键盘事件，再触发远程调用，也就是 debounce（去抖动）

function debounce(fn, wait = 200) {
    let timer;

    // 返回的函数可以接受参数，这个参数在调用 fn 时会原样传入
    return (...args) => {
        // 清除原来的 timer（如果没执行，就中断了
        clearTimeout(timer);
        // 重新设置 timer，wait 时间后执行
        timer = setTimeout(() => fn(...args), wait);
    };
}

https://jsfiddle.net/zcdnysuo/

Answer 2

作者可以去了解下，防抖，和节流这两个概念！