- 首先江场，我們需要知道什么是函數(shù)節(jié)流
舉個(gè)例子：一個(gè)水龍頭在滴水甩牺，可能一次性會(huì)滴很多滴，但是我們只希望它每隔 500ms 滴一滴水煌茬，保持這個(gè)頻率斥铺。即我們希望函數(shù)在以一個(gè)可以接受的頻率重復(fù)調(diào)用。
函數(shù)節(jié)流就是針對(duì)調(diào)用頻率高的函數(shù)坛善，通過設(shè)置定時(shí)器晾蜘，使其在執(zhí)行后間隔一段時(shí)間，才進(jìn)行下一次的執(zhí)行眠屎，避免重復(fù)頻繁的調(diào)用導(dǎo)致的瀏覽器性能以及ajax重復(fù)調(diào)用問題笙纤。
- 那么問題來了，有哪些函數(shù)是調(diào)用頻率高的呢组力？
最常見的一些需要節(jié)流的事件：onresize，scroll抖拴，mousemove ,mousehover燎字，因?yàn)檫@些事件會(huì)在頁面中頻繁被觸發(fā)
- 那么，函數(shù)節(jié)流該如何實(shí)現(xiàn)呢阿宅？思路是什么呢候衍？
主要實(shí)現(xiàn)思路就是通過setTimeout定時(shí)器，通過設(shè)置延時(shí)時(shí)間洒放，在第一次調(diào)用時(shí)蛉鹿，創(chuàng)建定時(shí)器，寫入需要執(zhí)行的函數(shù)往湿。第二次調(diào)用時(shí)妖异，會(huì)清除前一個(gè)定時(shí)器并設(shè)置新的定時(shí)器。如果這時(shí)前一個(gè)定時(shí)器暫未執(zhí)行领追，則將其替換為新的定時(shí)器他膳。目的在于在一定的時(shí)間內(nèi)，保證多次函數(shù)的請(qǐng)求只執(zhí)行最后一次調(diào)用
這個(gè)時(shí)候绒窑，我們看一個(gè)簡(jiǎn)單的例子
-
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函數(shù)節(jié)流測(cè)試</title>
</head>
<body>
<div class="box">我是一個(gè)div</div>
</body>
</html>
-
js代碼
document.querySelector('.box').addEventListener('mouseenter',function(){
console.log('鼠標(biāo)進(jìn)來啦')
})
-
這個(gè)時(shí)候在DIV里來回晃動(dòng)鼠標(biāo)棕孙，控制臺(tái)會(huì)打出很多鼠標(biāo)進(jìn)來啦
image.png
如果對(duì)JS進(jìn)行簡(jiǎn)單的修改，變成下面這樣
var clock
document.querySelector('.box').addEventListener('mouseenter',function(){
clearTimeout(clock)
clock = setTimeout(function(){
console.log('鼠標(biāo)進(jìn)來啦')
},1000)
})
那么些膨，我用鼠標(biāo)去來回晃的結(jié)果就是下面這樣了蟀俊，它只會(huì)在我進(jìn)入div并且1S內(nèi)沒有再次進(jìn)入的時(shí)候才會(huì)執(zhí)行
那么這就是一個(gè)簡(jiǎn)單的函數(shù)節(jié)流的實(shí)現(xiàn)，通過了解原理我們就可以優(yōu)化我們的代碼
