當前位置：
首頁 >
JS设计模式—节流模式的实际应用
發布時間：2025/7/14
36
豆豆
生活随笔
收集整理的這篇文章主要介紹了
JS设计模式—节流模式的实际应用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?在實際工作中，我們會經常遇到這樣的業務場景，比如點擊按鈕提交表單，點擊一次發一次請求，如果快速點擊多次會發送多次請求，這樣發送了多次請求是我們不愿意看到的。又比如輸入框我們輸入內容會調搜索的接口，那么每當我們輸入一個字符都會發送一次請求......為了解決類似的困擾，那么節流模式就應運而生了。
// 節流模式的核心思想是創建定時器,延遲程序的執行.var throttle = function f() {arguments.slice = Array.prototype.slice;var fn,params=[];//如果第一個參數是boolean類型那么第一個參數表示清除定時器if(typeof arguments[0] === 'boolean') {//第二個參數為函數fn = arguments[1];//函數的計時器句柄存在，清除該定時器fn.__throttleID && clearTimeout(fn. __throttleID);//工作計時器延遲執行函數} else {fn = arguments[0];params = arguments.slice(1);f(true,fn);//為函數綁定句柄函數fn.__throttleID = setTimeout(function() {//執行函數fn.apply(null, params);}, 500)}}下面讓我們開嘗試調用一下
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><input type="text" id="inputDom"/></body> </html><script type="text/javascript">var content = document.getElementById('inputDom');function press() {console.log("開始輸入了");}content.onkeyup = function (){throttle(press,1,2,3);}</script>可以看到，當連續輸入內容，在500毫秒內只發一次，這就達到了節流的效果了。
轉載于:https://www.cnblogs.com/linxing/p/10984181.html
總結
以上是生活随笔為你收集整理的JS设计模式—节流模式的实际应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Echarts的提示（Tooltip）显
- 下一篇： SpringCloud(一)：深入理解E