JavaScript中函數(shù)的防抖與節(jié)流詳解
一、函數(shù)的節(jié)流
1.1 定義
同時(shí)觸發(fā)多次函數(shù)執(zhí)行，執(zhí)行的是相同內(nèi)容，要求只執(zhí)行第一次請(qǐng)求。
例如scroll事件，鼠標(biāo)滾動(dòng)一次觸發(fā)多次函數(shù)執(zhí)行，只需要執(zhí)行一次。
1.2 解決方法
定義類(lèi)似于開(kāi)關(guān)的效果，定義一個(gè)變量?jī)?chǔ)存默認(rèn)值，觸發(fā)執(zhí)行之前先判斷變量存儲(chǔ)的數(shù)據(jù)，如果是原始數(shù)據(jù)賦值變量新數(shù)據(jù)，如果不是原始數(shù)據(jù)，執(zhí)行return 終止之后程序的執(zhí)行。
1.3 案例演示
這里我們先寫(xiě)一個(gè)窗口監(jiān)聽(tīng)事件。
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è)置高度讓頁(yè)面顯示滾動(dòng)條
height: 4000px;
}
</style>
</head>
<body>
<script>
// 創(chuàng)建窗口監(jiān)聽(tīng)事件
window.addEventListener("scroll",function(){
fun();
})
// 隨便寫(xiě)一個(gè)后臺(tái)輸出函數(shù)
function fun(){
console.log(666);
console.log(888);
}
</script>
</body>
</html>1.3 .2 運(yùn)行結(jié)果
可以看到，博主只撥動(dòng)了一次鼠標(biāo)的滾輪，但是函數(shù)卻執(zhí)行了不止一次。
函數(shù)的節(jié)流就是要做到，滾動(dòng)一次，執(zhí)行一次函數(shù)，后臺(tái)輸出一次結(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)聽(tīng)事件
// 存儲(chǔ)一個(gè)默認(rèn)值為true
let flag = true ;
// 窗口監(jiān)聽(tīng)事件
window.addEventListener("scroll",function(){
if( flag ){
flag = false ;
}else{
return ;
}
fun();
})
// 隨便寫(xiě)一個(gè)后臺(tái)輸出函數(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í)行最后一次請(qǐng)求，多次觸發(fā)的函數(shù)程序結(jié)果是不同的。
2.2 解決方法
通過(guò)延時(shí)器延遲時(shí)間執(zhí)行程序，先清除定時(shí)器，再觸發(fā)定義的新的延時(shí)器執(zhí)行函數(shù)程序。
2.3 案例演示
這里我們先寫(xiě)一個(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)聽(tīng)
oIpt.addEventListener('input',function(){
console.log(`您輸入了${oIpt.value.length}個(gè)字`);
})
</script>
</body>
</html>2.3.2 運(yùn)行結(jié)果
這里我判斷的是輸入字符串的長(zhǎng)度，可以看到輸出結(jié)果由1-5個(gè)字，最后打出中文又變回了2個(gè)字符。那防抖的操作就是我只打出最后一個(gè)“你好”這串字符的長(zhǎng)度。
也就是同時(shí)觸發(fā)多次函數(shù)請(qǐng)求，只執(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)聽(tīng)
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é)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了前端天氣插件tpwidget使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了js實(shí)現(xiàn)單擊圖片放大圖片的方法,涉及javascript操作圖片的技巧與onclick事件的用法,需要的朋友可以參考下2015-02-02
JS window對(duì)象的top、parent、opener含義介紹
本文為大家介紹下JS window對(duì)象的top、parent、opener含義，不了解的朋友可以參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了javascript中的this作用域詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
JS實(shí)現(xiàn)模糊查詢(xún)帶下拉匹配效果
這篇文章主要介紹了JS實(shí)現(xiàn)模糊查詢(xún)帶下拉匹配效果,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
簡(jiǎn)介JavaScript錯(cuò)誤處理機(jī)制
這篇文章主要介紹了JavaScript錯(cuò)誤處理機(jī)制的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-08-08
TypeScript中正確使用interface和type的方法實(shí)例
在ts中定義類(lèi)型由兩種方式:接口(interface)和類(lèi)型別名(type alias),interface只能定義對(duì)象類(lèi)型,下面這篇文章主要給大家介紹了關(guān)于TypeScript中正確使用interface和type的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)隨機(jī)抽取三人，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
本篇文章主要介紹了詳解webpack介紹&安裝&常用命令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
JavaScript中創(chuàng)建對(duì)象的7種模式詳解
本文主要介紹了JavaScript中創(chuàng)建對(duì)象的7種模式，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02