iT邦幫忙

0

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

$("#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 這邊會動五次。。。
請問有什麼方式可以改善這個情形嗎?

小魚 iT邦大師 1 級 ‧ 2018-10-02 12:04:16 檢舉
你說打5個字更新5次嗎?
聽起來很正常啊...
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2018-10-02 12:07:33
最佳解答

認真來說,你這樣的寫法的確一定會動5次。
如果是打算等輸入完在做處理的話,一般我會用所謂的延遲應用寫法。
只要將你的程式改寫成如下

var keyinTime;//此為需要事先定義要記錄的定時器
$("#search").on('keyup',function (e) {  
  var v = $(this).val();
  e.preventDefault();
  clearTimeout(keyinTime);//要清掉正在計時的事件,要不然會多重運行
  keyinTime = setTimeout(function(){ 
      if(v.length > 0){
        $.ajax({
          type: "GET",
          url: "search",
          data: 'search='+v,
          success: function(data){      
          $('#search-result-display').html(data);
      }
      });
   }
  }, 1000);//秒數就看你要定義多久才運行,一般理想是800~1500的值。
  
});

用如上的寫法,在key時,並不會馬上有作用,需要停止keyin一段時間後才有動作。
這樣才是比較理想的方式。

上面的程式碼改寫一下

看更多先前的回應...收起先前的回應...
火爆浪子 iT邦研究生 1 級 ‧ 2018-10-02 12:13:18 檢舉

嗯,原來還有這招

火爆浪子 iT邦研究生 1 級 ‧ 2018-10-02 12:17:25 檢舉

我發現我裝上去後,他似乎都沒有動靜@@

這要看你設定的秒數。你可以先按看看f12是否有錯誤。畢竟該段程式碼我並沒放在編輯器上。所以不確定是否有錯誤。
我只是大約告訴你重點。你了解了你需要自行處理

火爆浪子 iT邦研究生 1 級 ‧ 2018-10-02 12:28:44 檢舉

好喔

火爆浪子 iT邦研究生 1 級 ‧ 2018-10-08 22:22:53 檢舉

不知道有沒有更好的解法?

我要發表回答

立即登入回答