前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍节流的相关知识。
一、什么是节流
如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直到过了这段时间才重新生效。
二、使用节流的思路
如果定时器为空的话,就执行操作,如果定时器不为空,就不执行。也要使用闭包延长timerOut的作用域。
function thro(func, wait) {
let timerOut;
return function () {
if (!timerOut) {
timerOut = setTimeout(function () {
func();
timerOut = null;
}, wait)
}
}
}
function func(){
console.log('点击了');
}
document.getElementById('button').onclick = thro(func,5000)
三、节流的应用:图片懒加载
用户划的再快,也要设置一个固定时间来一次一次的加载图片。
四、防抖和节流的区别
1、防抖
就是触发事件后n秒后才执行事件处理函数,如果在n秒内又触发了事件,就会重新计时。
2、节流
就是连续触发事件,在指定时间间隔内只会执行一次函数,节流会减少函数的执行频率。