目錄
(免費學習推薦:javascript影片教學 )
前言
我們來聊一聊節流-另一個最佳化函數的想法。
我們還是以移動事件舉例
nbsp;html> <meta> <meta> <meta> <title>Document</title> <style> #wrapper { width: 100%; height: 140px; background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 30px; font-weight: bold; line-height: 140px; text-align: center; } </style> <p></p> <script> var count = 1; function moveAction () { oWrapper.innerHTML = count++; } var oWrapper = document.querySelector('#wrapper'); oWrapper.onmousemove = moveAction; </script>
它的效果是這樣:
一、核心與基本實作
節流的原理很簡單:如果你持續觸發某個事件,特定的時間間隔內,只執行一次。
關於節流的實現,有兩種主流的實現方式:
顧名思義,透過兩個時間戳來控制時間間隔,當觸發事件的時候:
now
;prev
;now - prev > wait
,證明時間區間維護結束,執行指定事件,更新prev
;根據這個思路,我們就可以實作第一版程式碼了:
oWrapper.onmousemove = throttle(moveAction, 1000);function throttle(func, wait) { var _this, arg; var prev = 0; // 上一次触发的时间,第一次默认为0 return function () { var now = Date.now(); // 触发时的时间 _this = this; if (now - prev > wait) { func.apply(_this, arg); // 允许传入参数,并修正this prev = now; // 更新上一次触发的时间 } }}
來看看借助它,效果是什麼樣的:
我們可以看到:
利用定時器來保證間隔時間內事件的觸發次數
timer
# ,記錄目前是否在週期內;時間之後再次執行,並且清除定時器;
function throttle(func, wait) { var _this, arg; var timer; // 初始化 return function () { _this = this; // 记录this arg = arguments; // 记录参数数组 if (timer) return; // 时候未到 timer = setTimeout(() => { func.apply(_this, arg); // 允许传入参数,并修正this timer = null; }, wait); }}來看看借助它,效果是什麼樣的: #但是,我們可以看到:
間隔後會執行一次
計時器 | ||
---|---|---|
立即執行 | n 秒後執行 | |
停止後不會執行 | 停止會再執行一次 |
二、節流進階
結合兩個想法完成一個可以立即執行,且停止觸發後再執行一次的節流方法:// 第三版function throttle(func, wait) { var timeout, context, args, result; var previous = 0; var later = function() { previous = +new Date(); timeout = null; func.apply(context, args) }; var throttled = function() { var now = +new Date(); //下次触发 func 剩余的时间 var remaining = wait - (now - previous); context = this; args = arguments; // 如果没有剩余的时间了或者你改了系统时间 if (remaining wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; func.apply(context, args); } else if (!timeout) { timeout = setTimeout(later, remaining); } }; return throttled;}效果演示如下: 我在看程式碼的時候,我是反覆列印數據才理解為什麼會這樣做,一起加油~
相關免費學習推薦:javascript##(影片) #
以上是JavaScript專題之四:節流的詳細內容。更多資訊請關注PHP中文網其他相關文章!