第JavaScript中函數(shù)的防抖與節(jié)流詳解目錄一、函數(shù)的節(jié)流1.1定義1.2解決方法1.3案例演示1.3.1代碼演示1.3.2運(yùn)行結(jié)果1.3.3添加函數(shù)節(jié)流操作1.3.4運(yùn)行結(jié)果二、函數(shù)的防抖2.1定義2.2解決方法2.3案例演示2.3.1代碼展示2.3.2運(yùn)行結(jié)果2.3.3添加函數(shù)防抖操作2.3.4運(yùn)行結(jié)果總結(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代碼演示

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

style

body{

//設(shè)置高度讓頁面顯示滾動條

height:4000px;

/style

/head

body

script

//創(chuàng)建窗口監(jiān)聽事件

window.addEventListener("scroll",function(){

fun();

//隨便寫一個(gè)后臺輸出函數(shù)

functionfun(){

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é)流操作

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

style

body{

height:4000px;

/style

/head

body

script

//創(chuàng)建窗口監(jiān)聽事件

//存儲一個(gè)默認(rèn)值為true

letflag=true;

//窗口監(jiān)聽事件

window.addEventListener("scroll",function(){

if(flag){

flag=false;

}else{

return;

fun();

//隨便寫一個(gè)后臺輸出函數(shù)

functionfun(){

//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代碼展示

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

/head

body

inputtype="text"

script

//獲取標(biāo)簽

constoIpt=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ù)防抖操作

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

/head

body

inputtype="text"

script

//獲取標(biāo)簽

constoIpt=document.querySelector('input');

//input輸入事件監(jiān)聽

oIpt.addEventListener('input',function(){

//先清除定時(shí)器

clearInterval(time);

//定義延時(shí)器延遲執(zhí)行函數(shù)程序

time=setTimeout(function(){

//延時(shí)器延遲一秒執(zhí)行程序

setPage();

},2000);

functionse