js 节流与防抖函数封装
节流与防抖函数封装和使⽤
常见应⽤场景：
window的 resize 和 scroll 事件；
⽂字输⼊时的 keyup 事件；
元素拖拽、移动时的 mousemove 事件；
防抖: 将多次执⾏变为最后⼀次执⾏
定义：多次触发事件后，事件处理函数只执⾏⼀次，并且是在触发操作结束时执⾏
原理：对处理函数进⾏延时操作，若设定的延时到来之前，再次触发事件，则清除上⼀次的延时操作定时器，重新定时。    /**
*防抖函数
*@param fn 事件触发的操作
*@param delay 多少毫秒内连续触发事件，不会执⾏
*@returns {Function}
*/
function debounce(fn, delay){
let timer = null; //借助闭包
return function(){
let context = this,
args = arguments;
js控制滚动条timer && clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
},delay);
}
}
//使⽤
function showTop() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 
console.log('滚动条位置：' + scrollTop);
}
函数节流: 将多次执⾏变为每隔⼀段时间执⾏
定义：当持续触发事件时，保证⼀定时间段内只调⽤⼀次事件处理函数。
原理：对处理函数进⾏延时操作，通过设定时间⽚，控制事件函数间断性的触发。
/**
* 节流函数
* @param fn 事件触发的操作
* @param delay 间隔多少毫秒需要触发⼀次事件
*/
//基本原理
function throttle(fn, delay) {
let valid = true;
return function() {
let context = this;
let args = arguments;
if (!valid) {
return;
}
valid = false;
setTimeout(() => {
fn.apply(context, args);
valid = true;
}, delay);
}
}
/
/时间戳
function throttle1(fn, delay) {
let prev = new Date();
return function() {　
let context = this;
let args = arguments;
let now = new Date();
if (now - prev >= delay) {
fn.apply(context, args);
prev = new Date();
}
}
}
//定时器
function throttle2(fn, delay) {
let timer = null;
return function() {
let context = this;
let args = arguments;
if (!timer) {
timer = setTimeout(function() {
fn.apply(context, args);
clearTimeout(timer);
}, delay)
}
}
}
//使⽤
function showTop() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;        console.log('滚动条位置：' + scrollTop);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。