函數循環(setInterval)

間隔指定的毫秒數不停地執行指定的代碼

<button onclick="myStartFunction()">開始</button> <button onclick="myStopFunction()">停止</button><script> var myVar = null; //全局function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t; }function myStart() {setInterval(function(){myTimer()},1000); // 開始執行 }function myStopFunction(){clearInterval(myVar); // 停止執行 } </script>

函數延時(setTimeout)

在指定的毫秒數后執行指定代碼

var myVar = null; //全局function myFunction() {myVar=setTimeout(function(){alert("Hello")},3000); }function myStopFunction() {clearTimeout(myVar); //停止執行 }

函數節流(throttle)

規定在一個單位時間內，只能觸發一次函數。如果這個單位時間內觸發多次函數，只有一次生效。

<button onclick="myFunction()">點擊</button> <script> // 節流函數 function throttle(fun, delay) {let last, deferTimerreturn function (args) {let that = thislet _args = argumentslet now = +new Date()if (last && now < last + delay) {clearTimeout(deferTimer)deferTimer = setTimeout(function () {last = nowfun.apply(that, _args)}, delay)}else {last = nowfun.apply(that,_args)}} }function myFunction() {throttle(() => {...}, 1000) } </script> 高程中的經典代碼： function throttle(method, context) {clearTimeout(method.tId);method.tId = setTimeout(function () {method.call(context);}, 100)}

應用場景:
1）鼠標不斷點擊觸發，mousedown(單位時間內只觸發一次)
2）監聽滾動事件，比如是否滑到底部自動加載更多，用throttle來判斷
3）視頻播放節點上報

函數防抖(debounce)

在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時。

function debounce(fun, delay) {return function (args) {let that = thislet _args = argsclearTimeout(fun.id)fun.id = setTimeout(function () {fun.call(that, _args)}, delay)} }debounce(ajax, 500)

應用場景:

search搜索聯想，用戶在不斷輸入值時，用防抖來節約請求資源。

window觸發resize的時候，不斷的調整瀏覽器窗口大小會不斷的觸發這個事件，用防抖來讓其只觸發一次

總結

以上是生活随笔為你收集整理的JavaScript 函数循环、延时、节流、防抖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。