27.JavaScript實作函式防抖和函式節流-有解無憂

1.JavaScrip實作函式防抖

this.myPlugin = this.myPlugin || {};


/**
 * 函式防抖，某個函式呼叫過于頻繁，想在一段時間后呼叫該函式
 */
this.myPlugin.debounce = function (callback, time) {
    var timer = null; //通過閉包存盤計時器
    return function () {
        timer && clearTimeout(timer); //每次執行前，將計時器清空
        var args = arguments; //利用閉包，保存每次傳入的形參
        timer = setTimeout(function () {
            callback.apply(null, args);
        }, time);
    };
};

myPlugin.js

呼叫函式防抖：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <script src="./js/myPlugin.js"></script>
    <script>
        var inp = document.getElementsByTagName("input")[0];
        //輸入框，若一秒內沒有輸入內容，則輸出輸入框中的內容
        var handle = myPlugin.debounce(function (val, inp) {
            console.log(val);
            console.log("inp是this指向:" + inp);
        }, 1000);
        inp.oninput = function () {
            handle(this.value, this)
        };
    </script>
</body>

</html>

index.html

效果展示：

2.JavaScript實作函式節流：

this.myPlugin = this.myPlugin || {};

/**
 * 函式防抖，某個函式呼叫過于頻繁，想在一段時間后呼叫該函式
 * 如：某個動作結束后，一秒后執行該函式
 */
this.myPlugin.debounce = function (callback, time) {
    var timer = null; //通過閉包存盤計時器
    return function () {
        timer && clearTimeout(timer); //每次執行前，將計時器清空
        var args = arguments; //利用閉包，保存每次傳入的形參
        timer = setTimeout(function () {
            callback.apply(null, args);
        }, time);
    };
};

/**
 * 函式節流，保證每隔一段時間，某個函式只執行一次
 * 如：某個動作操作時，每一秒后執行一次該函式
 */

 this.myPlugin.throttle = function(callback, time, immediately){
    !immediately && (immediately = false);//默認賦值為false
    var timeStamp,//時間戳
    timer = null;//利用閉包存盤計時器
    return function(){
        if(immediately){//立即執行后，在每隔一段時間執行一次
            if(!timeStamp || (timeStamp - Date.now()) > time){//
                callback.apply(null, args);
                timeStamp = Date.now();
            }
        }else{//每隔一段時間后執行一次
            if(timer){//計時器有值，則直接return
                return;
            }
            var args = arguments;//利用閉包，保存每次傳入的形參
            timer = setTimeout(function(){
                callback.apply(null, args);
                timer = null;//執行完本次函式，要清空計時器
            }, time);
        }
    };
 };

myPlugin.js

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/98439.html

標籤：JavaScript

上一篇：Vue學習之Vue模擬后臺資料

下一篇：一張紙的厚度是0.0001米，將紙對折，對折多少次厚度超過珠峰高度8848米。