JS 防抖和节流
//防抖 指触发事件后再n秒内函数只执行一次,若在n秒内再次触发则重新计算
// 点击按钮,2秒后调用函数,在1.5秒的时候点了
function debounce(func,wait) {
let timeOut;
return function () {
if (timeOut) clearTimeout(timeOut);
timeOut = setTimeout(()=>{
func.apply(this)
},wait)
}
}
//防抖 输入完毕后立即查询,过2秒才能再次查询
function debounce1(func,wait) {
let timeOut;
return function () {
if (timeOut)clearTimeout(timeOut); //取消之前的任务
let callNow = !timeOut; //类型转换
timeOut = setTimeout(()=>{ //增加一个定时器
timeOut = null; //清空当前定时器
},wait)
if (callNow)func.apply(this); //第一次执行
}
}
//节流 固定的时间去发请求 连续发生的事件在n秒内只执行一次函数
function throttle(func,wait) {
let timeOut; // 定义一个定时器
return function () {
if (!timeOut){ //是否存在定时器
timeOut = setTimeout(()=>{ //创建一个定时器
timeOut = null;
func.apply(this) //全局作用域
},wait)
}
}
}
//时间戳
function throttle1(func,wait) {
let prev = 0; //上次记录的时间
return function () {
let now = Date.now(); //当前的时间
if(now - prev > wait){ //当前的时间 - 上次时间 》 等待时间
func.apply(this); //执行函数
prev = now; //重置上次的记录时间
}
}
}