- 什么是防抖
- 在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时
- 用户在输入框中连续输入一串字符后,只会在输入完后去执行最后一次的查询ajax请求,这样可以有效减少请求次数,节约请求资源
- window的scroll事件,不断地调整浏览器的窗口大小、或者滚动时会触发对应事件,防抖让其只触发一次
- 实现
handleClick() {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
console.log(111);
}, 1000);
},
- 什么是节流
- 规定一个单位时间,只能有一次触发事件的回调函数执行,如果在同一时间内某事件被触发多次,只有一次能生效
- 鼠标连续不断地触发某事件(如点击),按照设置的时间来逐次执行;
- 在页面的无限加载场景下,当用户频繁滚动页面时,每隔一段时间才发一次请求展示数据,而不是按照用户滚动次数来请求数据
- 实现
handleClick() {
if (this.isRun) {
return;
}
this.isRun = true;
setTimeout(() => {
this.isRun = false;
console.log(111);
}, 1000);
},