防抖:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。
const debounce = function(fn, wait) {
let time;
return function() {
var context = this, args = arguments;
time && clearTimeout(time);
time = setTimeout(function{
//使用apply改变传入的fn方法中的this指向,指向绑定事件的DOM元素。
fn.apply(context, args);
}, wait)
}
}
节流:当持续触发事件时,保证一定时间段内只调用一次事件处理函数
const throttle = (fn, wait) => {
let startTime = Date.now();
return function() {
var now = Date.now(), context = this, args = arguments;
if (now - startTime >= wait) {
fn.apply(context, args);
startTime = Date.now();
}
}
}