<!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{
            //設(shè)置高度讓頁面顯示滾動條
            height: 4000px;
        }
    </style>
</head>
<body>
    <script>
        // 創(chuàng)建窗口監(jiān)聽事件
        window.addEventListener("scroll",function(){
            fun();
        })
        // 隨便寫一個后臺輸出函數(shù)
        function fun(){
            console.log(666);
            console.log(888);
 
        }
    </script>
</body>
</html>

1.3 .2 運(yùn)行結(jié)果

可以看到，博主只撥動了一次鼠標(biāo)的滾輪，但是函數(shù)卻執(zhí)行了不止一次。

函數(shù)的節(jié)流就是要做到，滾動一次，執(zhí)行一次函數(shù)，后臺輸出一次結(jié)果。

1.3 .3 添加函數(shù)節(jié)流操作

<!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>
        // 創(chuàng)建窗口監(jiān)聽事件
        // 存儲一個默認(rèn)值為true
        let flag = true ;
        // 窗口監(jiān)聽事件
        window.addEventListener("scroll",function(){
            if( flag ){
                    flag = false ;
                }else{
                    return ;
                }
                fun();
        })
        // 隨便寫一個后臺輸出函數(shù)
        function fun(){
            // document.write('已經(jīng)到達(dá)1000px的上卷高度了')
            console.log(666);
        }
    </script>
</body>
</html>

1.3 .4 運(yùn)行結(jié)果

二、函數(shù)的防抖

2.1 定義

同時觸發(fā)多次函數(shù)執(zhí)行，只執(zhí)行最后一次請求，多次觸發(fā)的函數(shù)程序結(jié)果是不同的。

2.2 解決方法

通過延時器延遲時間執(zhí)行程序，先清除定時器，再觸發(fā)定義的新的延時器執(zhí)行函數(shù)程序。

2.3 案例演示

這里我們先寫一個input輸入數(shù)據(jù)事件。

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>
        // 獲取標(biāo)簽
        const oIpt = document.querySelector('input');
        // input輸入事件監(jiān)聽
        oIpt.addEventListener('input',function(){
            console.log(`您輸入了${oIpt.value.length}個字`);
        })
 
    </script>
</body>
</html>

2.3.2 運(yùn)行結(jié)果

這里我判斷的是輸入字符串的長度，可以看到輸出結(jié)果由1-5個字，最后打出中文又變回了2個字符。那防抖的操作就是我只打出最后一個“你好”這串字符的長度。

也就是同時觸發(fā)多次函數(shù)請求，只執(zhí)行最后一次。

2.3.3 添加函數(shù)防抖操作

<!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>
        // 獲取標(biāo)簽
        const oIpt = document.querySelector('input');
        // input輸入事件監(jiān)聽
        oIpt.addEventListener('input',function(){
            
            // 先清除定時器
            clearInterval( time );
 
            // 定義延時器 延遲執(zhí)行 函數(shù)程序 
               time = setTimeout( function(){
                
                // 延時器 延遲一秒 執(zhí)行程序
                setPage() ;
 
            } , 2000 );
            
        })
        function setPage(){
            console.log(`您輸入了${oIpt.value.length}個字`);
        }
 
    </script>
</body>
</html>