防抖和节流一般应用于高频事件频繁触发的场景,如窗口大小改变,下拉加载,搜索等,可有效避免事件处理函数被频繁调用造成性能差的问题。
一、防抖和节流区别
防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。
防抖:指定时间内只执行一次,但在等待时间内再次触发事件,重新开始延时。
节流:指定时间内只执行一次。
二、防抖和节流介绍
1、防抖
防抖应用场景 – 搜索功能,实时响应用户输入,给出相关的建议词。
通常查询某个词,会频繁触发按键事件,如果每次都执行事件处理函数,不仅会产生没必要的数据请求,还会影响用户体验,因此该场景特别适合用防抖处理。
函数防抖示例:
//事件处理函数
function handle(arg){
//事件处理代码
console.log('事件处理函数-'+arg); //事件处理函数-keydownArg
}
//防抖
function debounce(fn, delay){
let timer = null;
return function(){
let content = this;
let args = arguments;
if(timer) clearTimeout(timer)
timer = setTimeout(function(){
fn.apply(content, args);
}, delay)
}
}
//事件绑定
var input = document.getElementById("input");
input.onkeydown = debounce(function(){
handle('keydownArg')
}, 500)
2、节流
节流应用场景 – 窗口大小改变,下拉加载等。
当改变窗口大小(或下拉加载)时,会频繁触发onresize(或onscroll)事件,调用事件处理函数,造成性能和体验方面的影响,节流可以避免频繁调用处理函数。
函数节流示例:
//事件处理函数
function handle(){
// 事件处理代码
console.log('事件处理函数-'+arg); //事件处理函数-resizeArg
}
// 防抖处理
function throttle(fn, delay){
let timer = null;
return function(){
if(timer) return false;
let content = this;
let args = arguments;
timer = setTimeout(function(){
timer = null
fn.apply(content, args);
}, delay)
}
}
//事件绑定函数
window.onresize = throttle(function(){
handle('resizeArg')
}, 500)