jquery運行代碼最後一次按鍵後2秒

它使用ajax來查詢api。

在輸入3個字符後，它會搜索每個按鍵。

我想要的是

情況1：
用戶輸入TES
2秒通過搜索執行

情況2：
用戶輸入TES
1秒通
用戶按t
2秒傳遞是在測試

CASE3進行
搜索：
用戶輸入TES
1秒傳遞
用戶按下噸
1.5秒傳遞
用戶按下我
1.5秒通過
用戶按n
1.5秒通過
用戶按下克
2秒通過
搜索在測試中表現

，從而可以看到，搜索動作時出現了兩個無按鍵（或糊劑ECT）時，才執行按下按鍵後的秒數。

我的基本想法是。

on keydown 調用設置超時的函數，該函數還設置包含文本框中最後一項的變量。當超時到期時，它檢查框中的值以查看它是否與變量中的值匹配。

如果他們匹配，那麼一直沒有變化。搜索也是如此

如果他們不做任何事情，因爲從後面的按鍵的超時將作出相同的檢查。

這是唯一/最好的方法嗎？

來源

2010-12-06 Hailwood

從Remy Sharp下面的函數就可以了：

function throttle(f, delay){ 
    var timer = null; 
    return function(){ 
     var context = this, args = arguments; 
     clearTimeout(timer); 
     timer = window.setTimeout(function(){ 
      f.apply(context, args); 
     }, 
     delay || 500); 
    }; 
}

在前面的代碼，f是函數您想要調節，delay是最後一次調用後等待的毫秒數（默認爲500，如果省略）。 throttle返回一個包裝函數，該函數將清除先前調用中的任何現有超時，然後將delay毫秒的超時設置爲f。對返回函數arguments的引用用於調用f，確保f接收它所期望的參數。

$('#search').keyup(throttle(function(){ 
    // do the search if criteria is met 
}));

來源

2010-12-06 13:51:14 brad

護理解釋它是如何工作：

您應按如下方式使用它呢？ f，適用？ – Hailwood 2010-12-06 21:25:37

除了計時器幾乎相同的設置爲僅當條件滿足：

<input id="search" type="text" /> 
<script> 
    var timer, value; 
    $('#search').bind('keyup', function() { 
     clearTimeout(timer); 
     var str = $(this).val(); 
     if (str.length > 2 && value != str) { 
      timer = setTimeout(function() { 
       value = str; 
       console.log('Perform search for: ', value); 
      }, 2000); 
     } 
    }); 
</script>

來源

2010-12-06 13:39:15 Heikki

jquery運行代碼最後一次按鍵後2秒

回答

相關問題