- 首先，我們需要知道什么是函數(shù)節(jié)流
函數(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ì)在頁(yè)面中頻繁被觸發(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)來啦
如果對(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í)行
