JavaScript的节流与防抖的一些思考

防抖的一些思考"/>

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);
}