防抖和节流的理解
概要
- 防抖或节流：限制函数的执行次数。
- 防抖：通过setTimeout的方式，在一段时间内间隔内，将多次触发变成一次触发。
- 节流：减少一段时间的触发频率。
防抖
/**
* 防抖
* @param {Function} fn 回调函数
* @param {number} dealy 等待时间
* */
function debounce(fn, dealy) {
let timer = null;
return function() {
if(timer){
clearTimeout(timer)
}
timer=setTimeout(fn,dealy)
}
}
使用方法：举个栗子
var _return = debounce(()=>{
console.log('输入返回')
},500)
$('#input').on('input',()=>{
_return();
})
节流
/**
* 节流
* @param {Function} fn 回调函数
* @param {number} dealy 等待时间
* */
export function throttle(fn, dealy) {
let flag = true;
return function() {
if(!flag){
return false;
}
flag=false;
setTimeout(()=>{
fn();
flag=true;
},dealy)
}
}
使用方法：举个栗子
var _return = throttle(()=>{
console.log('输入返回')
},500)
$('#input').on('input',()=>{
_return();
})