江门移动网站建设公司,微信网站设计模板下载,微信开发显示wordpress,宁波网站优化技术防抖
如果一个事件在短时间内连续触发#xff0c;则只去执行最后一次。 控制频率
实现方式#xff1a;每次触发事件时设置一个延迟调用方法#xff0c;并且取消之前的延时调用方法缺点#xff1a;如果事件在规定的时间间隔内被不断的触发#xff0c;则调用方法会被不断的…防抖
如果一个事件在短时间内连续触发则只去执行最后一次。 控制频率
实现方式每次触发事件时设置一个延迟调用方法并且取消之前的延时调用方法缺点如果事件在规定的时间间隔内被不断的触发则调用方法会被不断的延迟 /**
* desc 函数防抖
* param func 回调函数
* param delay 延迟执行毫秒数
*/
function _debounce(func, delay) { let timer; // 定时器return function () { let context this; // 记录 this 值,防止在回调函数中丢失let args arguments; // 函数参数// 标识是否立即执行let isImmediately !timer;//如果定时器存在则清除定时器(如果没有,也没必要进行处理)timer ? clearTimeout(timer) : null; timer setTimeout(() { timer null;}, delay);// isImmediately 为 true 则 执行函数(即首次触发事件)isImmediately ? func.apply(context, args) : null;}
} 节流 使一个函数在固定时间内只执行一次。控制次数 实现方式每次触发事件时如果当前有等待执行的延时函数则直接return //节流throttle代码
function throttle(fn,delay) {let canRun true; // 通过闭包保存一个标记return function () {// 在函数开头判断标记是否为true不为true则returnif (!canRun) return;// 立即设置为falsecanRun false;// 将外部传入的函数的执行放在setTimeout中setTimeout(() { // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。// 当定时器没有执行的时候标记永远是false在开头被return掉fn.apply(this, arguments);canRun true;}, delay);};
}function sayHi(e) {console.log(节流, e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener(resize, throttle(sayHi,500));
