亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript中函數的防抖與節(jié)流詳解

 更新時間：2022年02月22日 15:53:29   作者：大聰明碼農徐  
這篇文章主要為大家詳細介紹了JavaScript中函數的防抖與節(jié)流，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

一、函數的節(jié)流

1.1 定義

同時觸發(fā)多次函數執(zhí)行，執(zhí)行的是相同內容，要求只執(zhí)行第一次請求。

例如scroll事件，鼠標滾動一次觸發(fā)多次函數執(zhí)行，只需要執(zhí)行一次。

1.2 解決方法

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

1.3 案例演示

這里我們先寫一個窗口監(jiān)聽事件。

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>
        // 創(chuàng)建窗口監(jiān)聽事件
        window.addEventListener("scroll",function(){
            fun();
        })
        // 隨便寫一個后臺輸出函數
        function fun(){
            console.log(666);
            console.log(888);
 
        }
    </script>
</body>
</html>

1.3 .2  運行結果

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

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

1.3 .3  添加函數節(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)聽事件
        // 存儲一個默認值為true
        let flag = true ;
        // 窗口監(jiān)聽事件
        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  定義

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

2.2  解決方法

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

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

2.3.2  運行結果

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

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

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

2.3.4  運行結果

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!    

相關文章

最新評論