一、函数节流(throttle)
1、概念
尽管是持续的触发事件,但还是每隔一段时间执行一次事件,从而避免了短时间执行大量的事件而造成的卡顿。节流是无论怎样连续触发,结果都是每隔一段时间执行一次事件回调。
为了达到这个效果,可以使用定时器来实现。具体思路就是在事件第一次触发时会设置一个定时器,之后再次触发事件,除非上次设置的定时器执行完毕,否则不再设置定时器。这样,在一段时间内只会存在一个定时器,也就只有一个事件回调会被执行。
2、代码实现
- 将准备进行节流处理的函数传入到 throttle 函数中,生成一个新的函数,也可以传递参数
- 之后使用新生成的函数
// 函数节流
function throttle(func, time) {
let timer = null;
return function (...args) {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, args);
// 注意要将 timer 主动设置成 null
// 如果使用 clearTimerout(timer) 虽然会将定时器清除,但是 timer依然有值
timer = null;
}, time)
}
}
}
使用案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15</title>
<style>
#container {
width: 300px;
height