溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JavaScript中節流的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
前言
我們來聊一聊節流——另一個優化函數的思想。
我們還是以移動事件舉例
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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></head><body>
<p id="wrapper"></p>
<script>
var count = 1;
function moveAction () {
oWrapper.innerHTML = count++;
}
var oWrapper = document.querySelector('#wrapper');
oWrapper.onmousemove = moveAction;
</script></body></html>它的效果是這樣：
一、核心和基本實現
節流的原理很簡單：如果你持續觸發某個事件，特定的時間間隔內，只執行一次。
關于節流的實現，有兩種主流的實現方式：
時間戳思路
定時器思路
顧名思義，通過兩個時間戳來控制時間間隔，當觸發事件的時候：
我們取出當前的時間戳 now；
然后減去之前執行時的時間戳(首次值為 0 ) 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; // 更新上一次觸發的時間
}
}}來看看借助它，效果是什么樣的：
我們可以看到：
當鼠標移入的時候，事件立刻執行
每過 1s 會執行一次，且移動2.5s會執行2次，意味著動作停止后不會再執行。
利用定時器來保證間隔時間內事件的觸發次數
創建定時器timer，記錄當前是否在周期內；
判斷定時器是否存在，若存在則直接結束，否則執行事件；
wait時間之后再次執行，并清掉定時器；
當觸發事件的時候，我們設置一個定時器，再觸發事件的時候，如果定時器存在，就不執行，直到定時器執行，然后執行函數，清空定時器，這樣就可以設置下個定時器。
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);
}}來看看借助它，效果是什么樣的：
但是，我們可以看到：
當鼠標移入的時候，事件不會立刻執行;
鼠標定制后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 <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(later, remaining);
}
};
return throttled;}效果演示如下：
我在看代碼的時候，我是反復打印數據才理解為什么會這樣做，一起加油～
以上是“JavaScript中節流的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
