欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

一、函數(shù)的節(jié)流

1.1 定義

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

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

1.2 解決方法

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

1.3 案例演示

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

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

二、函數(shù)的防抖

2.1  定義

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

2.2  解決方法

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

2.3  案例演示

這里我們先寫一個(gè)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}個(gè)字`);
        })
 
    </script>
</body>
</html>

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

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

也就是同時(shí)觸發(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(){
            
            // 先清除定時(shí)器
            clearInterval( time );
 
            // 定義延時(shí)器 延遲執(zhí)行 函數(shù)程序 
               time = setTimeout( function(){
                
                // 延時(shí)器 延遲一秒 執(zhí)行程序
                setPage() ;
 
            } , 2000 );
            
        })
        function setPage(){
            console.log(`您輸入了${oIpt.value.length}個(gè)字`);
        }
 
    </script>
</body>
</html>

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

總結(jié)

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

相關(guān)文章

最新評論