diff --git a/Handwritten/src/debounce.js b/Handwritten/src/debounce.js index 02ba4dd..f4975ae 100644 --- a/Handwritten/src/debounce.js +++ b/Handwritten/src/debounce.js @@ -1,10 +1,10 @@ function simpleDebounce(func, wait) { - let timer = null; + let timeout = null; /* 触发时,参数传给了 debounced */ return function debounced() { let args = arguments; - if (timer) clearTimeout(timer); - timer = setTimeout(() => { + if (timeout) clearTimeout(timeout); + timeout = setTimeout(() => { /* this绑定和参数的传递, * 注意此处使用的是箭头函数,因此不需要在外层将 this 赋值给某变量 */ @@ -15,31 +15,31 @@ function simpleDebounce(func, wait) { function debounce(func, wait, immediate = true) { - let timer; + let timeout, result; // 延迟执行函数 const later = (context, args) => setTimeout(() => { - timer = null;// 倒计时结束 + timeout = null;// 倒计时结束 if (!immediate) { - func.apply(context, args); //执行回调 + result = func.apply(context, args); context = args = null; } }, wait); let debounced = function (...params) { - let context = this; - let args = params; - if (!timer) { - timer = later(context, args); + if (!timeout) { + timeout = later(this, params); if (immediate) { //立即执行 - func.apply(context, args); + result = func.apply(this, params); } } else { - clearTimeout(timer); + clearTimeout(timeout); //函数在每个等待时延的结束被调用 - timer = later(context, args); + timeout = later(this, params); } + return result; } + //提供在外部清空定时器的方法 debounced.cancel = function () { clearTimeout(timer); timer = null; diff --git a/Handwritten/src/throtte.js b/Handwritten/src/throtte.js index ebdb027..1476793 100644 --- a/Handwritten/src/throtte.js +++ b/Handwritten/src/throtte.js @@ -1,13 +1,13 @@ /** 时间戳 */ -function tampThrottle(func, delay) { - var lastTime = 0; +function tampThrottle(func, wait) { + var previous = 0; function throttled() { var context = this; var args = arguments; - var nowTime = Date.now(); - if (nowTime > lastTime + delay) { + var now = Date.now(); + if (now > previous + wait) { func.apply(context, args); - lastTime = nowTime; + previous = now; } } //防抖函数最终返回的是一个函数 @@ -16,59 +16,55 @@ function tampThrottle(func, delay) { /** 定时器实现 */ function timeThrottle(func, wait) { - let timer; + let timeout; return function throttled() { let args = arguments; - if (!timer) { - timer = setTimeout(() => { + if (!timeout) { + timeout = setTimeout(() => { func.apply(this, args); - clearTimeout(timer); - timer = null; + clearTimeout(timeout); + timeout = null; }, wait); } } } -function throttle(func, wait, options = { - leading: true, - trailing: true -}) { - let timer; - let lastTime = 0; +function throttle(func, wait, options) { + var timeout, context, args, result; + var previous = 0; + if (!options) options = {}; - const later = function (context, args) { - lastTime = options.trailing === true ? Date.now() : 0; - func.apply(context, args); - timer = null; + var later = function () { + previous = options.leading === false ? 0 : (Date.now() || new Date().getTime()); + timeout = null; + result = func.apply(context, args); + if (!timeout) context = args = null; }; - let throttled = function () { - let context = this; - let args = arguments; - let nowTime = Date.now(); - if (!lastTime && options.leading === false) { - lastTime = nowTime; //lastTime为0,会立即响应 - } - let remaining = wait - (nowTime - lastTime); - if (remaining <= 0) { - //remaining 的时间小于等于 0,表示两次触发的时间大于了间隔时间 - if (timer) { - //清楚定时器 - clearTimeout(timer); - timer = null; + var throttled = function () { + var now = Date.now() || new Date().getTime(); + if (!previous && options.leading === false) previous = now; + var remaining = wait - (now - previous); + context = this; + args = arguments; + if (remaining <= 0 || remaining > wait) { + if (timeout) { + clearTimeout(timeout); + timeout = null; } - lastTime = nowTime; - func.apply(context, args); - } else if (!timer && options.trailing) { - // 倒计时还在进行中,响应新的事件,重新设置事件 - timer = setTimeout(() => { later(context, args) }, remaining); + previous = now; + result = func.apply(context, args); + if (!timeout) context = args = null; + } else if (!timeout && options.trailing !== false) { + timeout = setTimeout(later, remaining); } + return result; }; throttled.cancel = function () { clearTimeout(timeout); - lastTime = 0; - timer = null; + previous = 0; + timeout = context = args = null; }; return throttled; diff --git a/Handwritten/test/throttle.html b/Handwritten/test/throttle.html index ae5fe0c..757912e 100644 --- a/Handwritten/test/throttle.html +++ b/Handwritten/test/throttle.html @@ -33,46 +33,42 @@