JavaScript中函數(shù)的防抖與節(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)文章
Fundebug支持監(jiān)控微信小程序HTTP請求錯(cuò)誤的方法
這篇文章主要介紹了Fundebug支持監(jiān)控微信小程序HTTP請求錯(cuò)誤的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02JS動態(tài)修改iframe內(nèi)嵌網(wǎng)頁地址的方法
這篇文章主要介紹了JS動態(tài)修改iframe內(nèi)嵌網(wǎng)頁地址的方法,涉及javascript動態(tài)修改iframe中src屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04JavaScript 懸浮窗口實(shí)現(xiàn)代碼
主要是window.onscroll的運(yùn)用2009-02-02JavaScript直播評論發(fā)彈幕切圖功能點(diǎn)集合效果代碼
這篇文章主要介紹了JavaScript直播評論發(fā)彈幕切圖功能點(diǎn)集合效果代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jquery實(shí)現(xiàn)右側(cè)欄菜單選擇操作
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)右側(cè)欄菜單選擇操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03