节流 --- 第一个人说了算
// fn是我们需要包装的事件回调, interval是时间间隔的阈值Function.prototype.throttle = (fn, interval)=>{// last为上一次触发回调的时间let last = 0;// 将throttle处理结果当作函数返回return function () {// 保留调用时的this上下文let context = this// 保留调用时传入的参数let args = arguments// 记录本次触发回调的时间let now = +new Date()// 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值if (now - last >= interval) {// 如果时间间隔大于我们设定的时间间隔阈值,则执行回调last = now;fn.apply(context, args);}}}
复制代码
防抖 --- 最后一个说了算
// fn是我们需要包装的事件回调, delay是每次推迟执行的等待时间
function debounce(fn, delay) {// 定时器let timer = null// 将debounce处理结果当作函数返回return function () {// 保留调用时的this上下文let context = this// 保留调用时传入的参数let args = arguments// 每次事件被触发时,都去清除之前的旧定时器if(timer) {clearTimeout(timer)}// 设立新定时器timer = setTimeout(function () {fn.apply(context, args)}, delay)}
}
复制代码
转载于:https://juejin.im/post/5cbd850bf265da03ac0d0a9d