- 首先，我们需要知道什么是函数节流
举个例子：一个水龙头在滴水，可能一次性会滴很多滴，但是我们只希望它每隔 500ms 滴一滴水，保持这个频率。即我们希望函数在以一个可以接受的频率重复调用。
函数节流就是针对调用频率高的函数，通过设置定时器，使其在执行后间隔一段时间，才进行下一次的执行，避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。
- 那么问题来了，有哪些函数是调用频率高的呢？
最常见的一些需要节流的事件：onresize，scroll，mousemove ,mousehover，因为这些事件会在页面中频繁被触发
- 那么，函数节流该如何实现呢？思路是什么呢？
主要实现思路就是通过setTimeout定时器，通过设置延时时间，在第一次调用时，创建定时器，写入需要执行的函数。第二次调用时，会清除前一个定时器并设置新的定时器。如果这时前一个定时器暂未执行，则将其替换为新的定时器。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用
这个时候，我们看一个简单的例子
-
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数节流测试</title>
</head>
<body>
<div class="box">我是一个div</div>
</body>
</html>
-
js代码
document.querySelector('.box').addEventListener('mouseenter',function(){
console.log('鼠标进来啦')
})
-
这个时候在DIV里来回晃动鼠标，控制台会打出很多鼠标进来啦
image.png
如果对JS进行简单的修改，变成下面这样
var clock
document.querySelector('.box').addEventListener('mouseenter',function(){
clearTimeout(clock)
clock = setTimeout(function(){
console.log('鼠标进来啦')
},1000)
})
那么，我用鼠标去来回晃的结果就是下面这样了，它只会在我进入div并且1S内没有再次进入的时候才会执行
image.png
那么这就是一个简单的函数节流的实现，通过了解原理我们就可以优化我们的代码
网友评论