Skip to content

Commit

Permalink
modify
Browse files Browse the repository at this point in the history
  • Loading branch information
@YvetteLau
YvetteLau committed Jul 2, 2019
1 parent 1fab1f1 commit ccd1d07
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 91 deletions.
26 changes: 13 additions & 13 deletions Handwritten/src/debounce.js
View file
Original file line number Diff line number Diff line change
@@ -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 赋值给某变量
*/
Expand All @@ -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;
Expand Down
78 changes: 37 additions & 41 deletions Handwritten/src/throtte.js
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
//防抖函数最终返回的是一个函数
Expand All @@ -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;
Expand Down
70 changes: 33 additions & 37 deletions Handwritten/test/throttle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,46 +33,42 @@
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script>
window.onload = function () {
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;
Expand All @@ -81,12 +77,12 @@
function a() {
console.log(1);
}
// let b = throttle(a, 2000);
let b = _.throttle(a, 2000);
setTimeout(b, 0);
setTimeout(b, 800);
setTimeout(b, 1200);
setTimeout(b, 2500);
let b = throttle(a, 1000);
// let b = _.throttle(a, 2000);
// setTimeout(b, 0);
setTimeout(b, 500);
setTimeout(b, 1800);
setTimeout(b, 2200);



Expand Down

0 comments on commit ccd1d07

Please sign in to comment.