防抖和节流函数
什么是防抖函数:举个例子来说,你用鼠标拖动滚动条来获取滚动的距离,实际上控制台是不停的在打印console.log出来,防抖函数就是在你最后滚动的那一下才console.log打印出滚动的高度
防抖函数的封装
function scrollTop() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
}
window.onscroll = debounce(scrollTop, 1000) //只要滚动条滚动就会实时触发// 防抖
function debounce(fn, delay) {
let time = false //第一次进来time为false,走else
return function(){
if (time) {
clearTimeout(time) //滚动条在不断的滚动,我们不断的清除定时器(重新初始化定时器,在重新设置定时器)
time = setTimeout(fn, delay) //又重新设置定时器,
} else {
time = setTimeout(fn, delay) //进来第一次先进入这里,然后time被赋值 != false,如果滚动条在继续滚动,接着马上进入time == true中
}
}
}
什么是节流函数:你用鼠标拖动滚动条来获取滚动的距离,每隔一段时间console.log一次滚动的距离
节流函数的封装
function scrollTop() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
}
window.onscroll = throttle(scrollTop, 1000) //只要滚动条滚动就会实时触发
function throttle(fn, delay) {
let flag = true //初始化flag,默认为true
return function(){
if(!flag){ //如果flag为false了,则不再执行后面的内容(禁止setTimeout函数被重复的执行)
return false
}
flag = false // 改变flag的状态
setTimeout(()=>{ //n秒后执行函数fn,并且将flag改为true
fn()
flag = true //将flag改为true,不在走return false
},delay)
}
}