防抖的一些思考"/>
JavaScript的节流与防抖的一些思考
节流防抖是常用的两个公用函数。
节流在于控制事件不要执行的太频繁,限制时间执行;防抖是控制事件在固定时间内连续调用,只执行一次。
关于是否初次调用执行函数问题,不同的场景需求不一样,所以可以开放变量出来。
/*** @method 节流* @params method 方法名,非匿名函数* @param time 时间* @params isImmediate 是否立即执行* */
export function throttling(method, time = 300, isImmediate = false) {if (method.__timeoutId) {// 定制器存在,设置下次延时结束要执行的标识method.__nextAction = true;} else {// 初次未设置时间,执行一次并设置下次执行禁止延时if (isImmediate) method();method.__timeoutId = setTimeout(() => {// 存在执行标识,开始执行if ((isImmediate && method.__nextAction) || !isImmediate) method();// 恢复初始化method.__nextAction = false;method.__timeoutId = null;}, time)}
}
/*** @method 防抖* @params method 方法名,非匿名函数* @param time 时间* @params isImmediate 是否立即执行* */
export function debouncing(method, time = 300, isImmediate = false) {if (method.__timeoutId) {// 定时器存在,清除clearTimeout(method.__timeoutId);// 设置接下来要执行的标识method.__nextAction = true;} else {// 调用函数优先执行一次if (isImmediate) method();}// 重置延时method.__timeoutId = setTimeout(() => {// 非初次执行,需要时间结束执行if (!isImmediate) {method();} else if (isImmediate && method.__nextAction) {// 设置了初始执行后,到了时间 清除延时clearTimeout(method.__timeoutId);}// 恢复初始化method.__nextAction = false;method.__timeoutId = null;}, time);
}
更多推荐
JavaScript的节流与防抖的一些思考
发布评论