函数节流与防抖是很相似的概念,但它们的应用场景不太一样。
函数节流
- 定义:指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
- 应用场景:
- 用于监听 mousemove, touchmove, resize, scroll等事件
- 拖拽动画、下拉加载等
function throttle(fn, delay = 200){
var lastTime = 0;
return function(){
var nowTime = new Date();
if(nowTime - lastTime > delay){
fn.call(this)
lastTime = nowTime
}
}
}
document.onscroll = throttle(function(){
console.log("e")
})
函数防抖
- 定义:指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
- 应用场景:
- 可用于input.change实时输入校验,比如输入实时查询,你不可能摁一个字就去后端查一次,肯定是输一串,统一去查询一次数据
- 提交按钮的点击事件
<button>提交</button>
/****非立即执行******/
function debounce(fn, delay = 1000){
var timer = null;
return function(){
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(this)
}, delay)
}
}
/****立即执行******/
function debounce(fn, delay = 1000){
var timer = null;
return function(){
clearTimeout(timer);
if(!timer){
fn.apply(this)
}
timer = setTimeout(function(){
timer = null
}, delay)
}
}
document.querySelector('input').onclick = debounce(function(){
console.log("触发了")
})