防抖(debounce)
在一定时间内,只执行最后一次任务。
在事件被触发的 N 秒后再执行任务(回调函数),如果在这 N 秒内又触发事件,则重新计时:
- 当事件触发时,相应的响应处理函数不会立即被触发,而是等待一定的时间;
- 当事件密集触发时,函数的触发会被频繁的推迟;
- 只有等待了一段时间也没有事件触发,才会真正执行响应处理函数。
防抖的应用场景:
- 手机号、邮箱输入检测
- 搜索框搜索输入(只需最后一次输入完后,再发送 Ajax 请求,减少请求次数,节约请求资源)
- 窗口大小 resize(只需窗口调整完成后,计算窗口大小,防止重复渲染)
- 滚动事件 scroll(只需执行触发的最后一次滚动事件的处理程序)
- 文本输入的验证(连续输入文字后发送 Ajax 请求进行验证,(停止输入后)验证一次就好
手写实现防抖:
var btn=document.querySelector('button')
var ipt=document.querySelector('input')
btn.addEventListener('click',debounce(getValue,2000))
function getValue(){
var val=ipt.value
console.log(val);
}
function debounce(fn,time){
let t=null
return function(){
if(t){
clearTimeout(t)
}
var firstClick=!t
if(firstClick){
fn.apply(this,arguments)
}
t=setTimeout(() => {
t=null
}, time);
}
}
节流
在一定时间内,同一个任务只会执行一次。
在一定时间内,只能触发一次响应函数,如果事件频繁触发,只有一次生效。
节流的应用场景:
- DOM 元素的拖拽功能实现(mousemove)
- 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
- 计算鼠标移动的距离(mousemove)
- 搜索联想(keyup)
- 滚动事件 scroll,(只要页面滚动就会间隔一段时间判断一次)
var btn=document.querySelector('button')
var ipt=document.querySelector('input')
btn.addEventListener('click',throttle(getValue,2000))
function getValue(){
var val=ipt.value
console.log(val);
}
function throttle(fn,time){
var begin=0
return function(){
var date=new Date().getTime()
if(date-begin>time){
fn.apply(this,arguments)
begin=date
}
}
}