JavaScript中節流的示例分析-創新互聯

小編給大家分享一下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>

它的效果是這樣：

JavaScript中節流的示例分析

一、核心和基本實現

節流的原理很簡單：如果你持續觸發某個事件，特定的時間間隔內，只執行一次。

關于節流的實現，有兩種主流的實現方式：

時間戳思路
定時器思路

1.1 時間戳思路

顧名思義，通過兩個時間戳來控制時間間隔，當觸發事件的時候：

我們取出當前的時間戳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; // 更新上一次觸發的時間
        }
    }}

來看看借助它，效果是什么樣的：

JavaScript中節流的示例分析

我們可以看到：

當鼠標移入的時候，事件立刻執行
每過 1s 會執行一次，且移動2.5s會執行2次，意味著動作停止后不會再執行。

1.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);
    }}

來看看借助它，效果是什么樣的：

JavaScript中節流的示例分析

但是，我們可以看到：

當鼠標移入的時候，事件不會立刻執行;
鼠標定制后wait間隔后會執行一次

1.3 兩種思路的區別

	時間戳	定時器
“起點”	立即執行	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中節流的示例分析