JavaScript中函數的防抖與節流詳解

Posted on by

一、函數的節流

1.1 定義

同時觸發多次函數執行，執行的是相同內容，要求隻執行第一次請求。

例如scroll事件，鼠標滾動一次觸發多次函數執行，隻需要執行一次。

1.2 解決方法

定義類似於開關的效果，定義一個變量儲存默認值，觸發執行之前先判斷變量存儲的數據，如果是原始數據賦值變量新數據，如果不是原始數據，執行return 終止之後程序的執行。

1.3 案例演示

這裡我們先寫一個窗口監聽事件。

1.3 .1  代碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            //設置高度讓頁面顯示滾動條
            height: 4000px;
        }
    </style>
</head>
<body>
    <script>
        // 創建窗口監聽事件
        window.addEventListener("scroll",function(){
            fun();
        })
        // 隨便寫一個後臺輸出函數
        function fun(){
            console.log(666);
            console.log(888);
 
        }
    </script>
</body>
</html>

1.3 .2  運行結果

可以看到，博主隻撥動瞭一次鼠標的滾輪，但是函數卻執行瞭不止一次。

函數的節流就是要做到，滾動一次，執行一次函數，後臺輸出一次結果。

1.3 .3  添加函數節流操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 4000px;
        }
    </style>
</head>
<body>
    <script>
        // 創建窗口監聽事件
        // 存儲一個默認值為true
        let flag = true ;
        // 窗口監聽事件
        window.addEventListener("scroll",function(){
            if( flag ){
                    flag = false ;
                }else{
                    return ;
                }
                fun();
        })
        // 隨便寫一個後臺輸出函數
        function fun(){
            // document.write('已經到達1000px的上卷高度瞭')
            console.log(666);
        }
    </script>
</body>
</html>

1.3 .4  運行結果 

二、函數的防抖

2.1  定義

同時觸發多次函數執行，隻執行最後一次請求，多次觸發的函數程序結果是不同的。

2.2  解決方法

通過延時器延遲時間執行程序，先清除定時器，再觸發定義的新的延時器執行函數程序。

2.3  案例演示

這裡我們先寫一個input輸入數據事件。

2.3.1  代碼展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        // 獲取標簽
        const oIpt = document.querySelector('input');
        // input輸入事件監聽
        oIpt.addEventListener('input',function(){
            console.log(`您輸入瞭${oIpt.value.length}個字`);
        })
 
    </script>
</body>
</html>

2.3.2  運行結果

這裡我判斷的是輸入字符串的長度，可以看到輸出結果由1-5個字，最後打出中文又變回瞭2個字符。那防抖的操作就是我隻打出最後一個“你好”這串字符的長度。

也就是同時觸發多次函數請求，隻執行最後一次。

2.3.3 添加函數防抖操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        // 獲取標簽
        const oIpt = document.querySelector('input');
        // input輸入事件監聽
        oIpt.addEventListener('input',function(){
            
            // 先清除定時器
            clearInterval( time );
 
            // 定義延時器 延遲執行 函數程序 
               time = setTimeout( function(){
                
                // 延時器 延遲一秒 執行程序
                setPage() ;
 
            } , 2000 );
            
        })
        function setPage(){
            console.log(`您輸入瞭${oIpt.value.length}個字`);
        }
 
    </script>
</body>
</html>

2.3.4  運行結果

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!    

推薦閱讀：