防抖(debounce)
定义:触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行事件。(多次点击只执行最后一次)
应用:搜索框搜索输入。只需用户最后一次输入完,在发送请求
手机号、邮箱验证输入检测onchange oninput事件
窗口大小resize。只需窗口调整完成后,计算窗口大小,防止重复渲染
举例:
就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想词的方法就不可能是输入框内容一改变就触发的,他一定是当你结束输入一段时间之后才会触发
const debounce=(fn,wait,immediate)=>{
let timer=null;
return function(...args){
if(timer)clearTimeout(timer);
if(immediate && !timer){
fn.call(this,args)
}
timer=setTimeout(()=>{
fn.call(this,args)
},wait)
}
}
const betterfn=debounce(()=>console.log('防抖执行'),1000,true)
document.addEventListener("scroll", betterFn);
//获取元素
var box = document.getElementsByID('box');
box.addEventListener('click',function(){
// 添加定时器之前清除定时器
clearTimeout(timer)
//延迟2秒触发
timer = setTimeout(function(){
console.log(8888)
},2000)
})
节流(thorttle)
定义:当持续触发事件时,保证隔间时间触发一次事件(规定的时间内只执行一次)
应用:懒加载,滚动加载,加载更多或监听滚动条位置
百度搜索框,搜索联想功能
防止高频点击提交,防止表单重复提交
举例:
预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时,你不断点刷新点购买,可是总有一段时间你点上是没有效果,这里就用到了节流,就是怕点的太快导致系统出现bug
function throttle(fn,wait){
let pre=0;
return function(...args){
let now=Date.now()
if(now-pre>=wait){
fn.apply(this,args)
pre=now
}
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));
//获取元素
var box = document.getElementsById('box');
//定时器变量为空
var timer = null;
box.addEventListener('click',function(){
//判断有没有定时器 有的话不执行 没有的话执行
if(timer) return;
// 定时器
timer = setTimeout(function(){
console.log(8888)
timer = null;
},3000)
})
相同点:
1、都使用setTimeout实现
2、目的都是,降低回调执行频率,节省计算资源(它们都是可以防止一个函数被无意义的高频率调用)
不同点:
1、函数防抖,在一段连续操作结束后,利用clearTimeout和setTimeout实现,函数节流,在一段连续操作中,每一段时间执行一次,频率较高的事件中使用来提高性能
2、函数防抖关注一定事件连续触发,只是最后执行一次,函数节流是一段时间内执行一次