- 首先，我們需要知道什么是函數(shù)節(jié)流
函數(shù)節(jié)流就是針對調(diào)用頻率高的函數(shù)，通過設(shè)置定時器，使其在執(zhí)行后間隔一段時間，才進行下一次的執(zhí)行，避免重復(fù)頻繁的調(diào)用導(dǎo)致的瀏覽器性能以及ajax重復(fù)調(diào)用問題。
- 那么問題來了，有哪些函數(shù)是調(diào)用頻率高的呢？
最常見的一些需要節(jié)流的事件：
onresize，scroll，mousemove,mousehover，因為這些事件會在頁面中頻繁被觸發(fā)
- 那么，函數(shù)節(jié)流該如何實現(xiàn)呢？思路是什么呢？
主要實現(xiàn)思路就是通過setTimeout定時器，通過設(shè)置延時時間，在第一次調(diào)用時，創(chuàng)建定時器，寫入需要執(zhí)行的函數(shù)。第二次調(diào)用時，會清除前一個定時器并設(shè)置新的定時器。如果這時前一個定時器暫未執(zhí)行，則將其替換為新的定時器。目的在于在一定的時間內(nèi)，保證多次函數(shù)的請求只執(zhí)行最后一次調(diào)用
這個時候，我們看一個簡單的例子
- HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函數(shù)節(jié)流測試</title>
</head>
<body>
<div class="box">我是一個div</div>
</body>
</html>
- JS代碼
document.querySelector('.box').addEventListener('mouseenter',function(){
console.log('鼠標(biāo)進來啦')
})
- 這個時候在DIV里來回晃動鼠標(biāo)，控制臺會打出很多
鼠標(biāo)進來啦
如果對JS進行簡單的修改，變成下面這樣
var clock
document.querySelector('.box').addEventListener('mouseenter',function(){
clearTimeout(clock)
clock = setTimeout(function(){
console.log('鼠標(biāo)進來啦')
},1000)
})
那么，我用鼠標(biāo)去來回晃的結(jié)果就是下面這樣了，它只會在我進入div并且1S內(nèi)沒有再次進入的時候才會執(zhí)行
