您可以在 github 仓库中找到这篇文章中的所有代码。
异步编程定时器相关的挑战
有时间限制的缓存
class timelimitedcache {
constructor() {
this._cache = new map();
}
set(key, value, duration) {
const found = this._cache.has(key);
if (found) {
cleartimeout(this._cache.get(key).ref);
}
this._cache.set(key, {
value,
ref: settimeout(() => {
this._cache.delete(key);
}, duration),
});
return found;
}
get(key) {
if (this._cache.has(key)) {
return this._cache.get(key);
} else {
return -1;
}
}
count() {
return this._cache.size;
}
}
// usage example
const timelimitedcache = new timelimitedcache();
console.log(timelimitedcache.set(1, 'first', 1000)); // => false
console.log(timelimitedcache.get(1).value); // => 'first'
console.log(timelimitedcache.count()); // => 1
settimeout(() => {
console.log(timelimitedcache.count()); // => 0
console.log(timelimitedcache.get(1)); // => -1
}, 2000);
取消间隔
/**
* @param {function} callback
* @param {number} delay
* @param {...any} args
* @returns {function}
*/
function setcancellableinterval(callbackfn, delay, ...args) {
const timerid = setinterval(callbackfn, delay, ...args);
return () => {
clearinterval(timerid);
};
}
// usage example
let i = 0;
// t = 0:
const cancel = setcancellableinterval(() => {
i++;
}, 100);
// t = 50:
cancel();
// t = 100: i is still 0 because cancel() was called.
取消超时
/**
* @param {function} callbackfn
* @param {number} delay
* @param {...any} args
* @returns {function}
*/
function setcancellabletimeout(callbackfn, delay, ...args) {
const timerid = settimeout(callbackfn, delay, ...args);
return () => {
cleartimeout(timerid);
};
}
// usage example
let i = 0;
// t = 0:
const cancel = setcancellabletimeout(() => {
i++;
}, 100);
// t = 50:
cancel();
// t = 100: i is still 0 because cancel() was called.
清除所有超时定时器
/**
* cancel all timer from window.settimeout
*/
const timerqueue = [];
const originalsettimeout = window.settimeout;
window.settimeout = function (callbackfn, delay, ...args) {
const timerid = originalsettimeout(callbackfn, delay, ...args);
timerqueue.push(timerid);
return timerid;
}
function clearalltimeout() {
while (timerqueue.length) {
cleartimeout(timerqueue.pop());
}
}
// usage example
settimeout(func1, 10000)
settimeout(func2, 10000)
settimeout(func3, 10000)
// all 3 functions are scheduled 10 seconds later
clearalltimeout()
// all scheduled tasks are cancelled.
去抖动
/**
* @param {function} fn
* @param {number} wait
* @return {function}
*/
function debounce(fn, wait = 0) {
let timerid = null;
return function (...args) {
const context = this;
cleartimeout(timerid);
timerid = settimeout(() => {
timerid = null;
fn.call(context, ...args);
}, wait);
}
}
// usage example
let i = 0;
function increment() {
i += 1;
}
const debouncedincrement = debounce(increment, 100);
// t = 0: call debouncedincrement().
debouncedincrement(); // i = 0
// t = 50: i is still 0 because 100ms have not passed.
// call debouncedincrement() again.
debouncedincrement(); // i = 0
// t = 100: i is still 0 because it has only
// been 50ms since the last debouncedincrement() at t = 50.
// t = 150: because 100ms have passed since
// the last debouncedincrement() at t = 50,
// increment was invoked and i is now 1 .
风门
/**
* @param {function} fn
* @param {number} wait
* @return {function}
*/
function throttle(fn, wait = 0) {
let shouldthrottle = false;
return function (...args) {
if (shouldthrottle) {
return;
}
shouldthrottle = true;
settimeout(() => {
shouldthrottle = false;
}, wait);
fn.call(this, ...args);
}
}
// usage example
let i = 0;
function increment() {
i++;
}
const throttledincrement = throttle(increment, 100);
// t = 0: call throttledincrement(). i is now 1.
throttledincrement(); // i = 1
// t = 50: call throttledincrement() again.
// i is still 1 because 100ms have not passed.
throttledincrement(); // i = 1
// t = 101: call throttledincrement() again. i is now 2.
// i can be incremented because it has been more than 100ms
// since the last throttledincrement() call at t = 0.
throttledincrement(); // i = 2
重复间隔
const url = 'https://fastly.picsum.photos/id/0/5000/3333.jpg?hmac=_j6ghy5fcfsd6tvtcv74zxivkjspifr9b8w34xeqmvu';
function fetchdata(url) {
return fetch(url)
.then((response) => {
if (!response.ok) {
throw new error(`error: ${response.status}`);
}
return response.blob();
})
.then((data) => {
console.log(data);
})
.catch((err) => {
console.log(`error: ${err}`);
});
}
function repeat(callbackfn, delay, count) {
let currentcount = 0;
const timerid = setinterval(() => {
if (currentcount < count) {
callbackfn();
currentcount += 1;
} else {
clearinterval(timerid);
}
}, delay);
return {
clear: () => clearinterval(timerid),
}
}
// usage example
const cancel = repeat(() => fetchdata(url), 2000, 5);
settimeout(() => {
cancel.clear();
}, 11000);
可恢复间隔
/**
* @param {function} callbackfn
* @param {number} delay
* @param {...any} args
* @returns {{start: function, pause: function, stop: function}}
*/
function createresumableinterval(callbackfn, delay, ...args) {
let timerid = null;
let stopped = false;
function cleartimer() {
clearinterval(timerid);
timerid = null;
}
function start() {
if (stopped || timerid) {
return;
}
callbackfn(...args);
timerid = setinterval(callbackfn, delay, ...args);
}
function pause() {
if (stopped) {
return;
}
cleartimer();
}
function stop() {
stopped = true;
cleartimer();
}
return {
start,
pause,
stop,
};
}
// usage example
let i = 0;
// t = 0:
const interval = createresumableinterval(() => {
i++;
}, 10);
// t = 10:
interval.start(); // i is now 1.
// t = 20: callback executes and i is now 2.
// t = 25:
interval.pause();
// t = 30: i remains at 2 because interval.pause() was called.
// t = 35:
interval.start(); // i is now 3.
// t = 45: callback executes and i is now 4.
// t = 50:
interval.stop(); // i remains at 4.
实现 setinterval()
/**
* @param {function} callbackfn
* @param {number} delay
* @return {object}
*/
// use `requestanimationframe`
function mysetinterval(callbackfn, delay) {
let timerid = null;
let start = date.now();
// loop
function loop() {
const current = date.now();
if (current - start >= delay) {
callbackfn();
start = current;
}
timerid = requestanimationframe(loop);
}
// run loop
loop();
return {
clear: () => cancelanimationframe(timerid),
}
}
const interval = mysetinterval(() => {
console.log('interval tick');
}, 1000);
// cancel
settimeout(() => {
interval.clear();
}, 5000);
// use `settimeout`
function mysetinterval(callbackfn, delay) {
let timerid = null;
let start = date.now();
let count = 0;
// loop
function loop() {
const drift = date.now() - start - count * delay;
count += 1;
timerid = settimeout(() => {
callbackfn();
loop();
}, delay - drift);
}
// run loop
loop();
return {
clear: () => cleartimeout(timerid),
}
}
const interval = mysetinterval(() => {
console.log('interval tick');
}, 1000);
// cancel
settimeout(() => {
interval.clear();
}, 5000);
实现 settimeout()
function setTimeout(callbackFn, delay) {
let elapsedTime = 0;
const interval = 100;
const intervalId = setInterval(() => {
elapsedTime += interval;
if (elapsedTime >= delay) {
clearInterval(intervalId);
callbackFn();
}
}, interval);
}
// Usage example
mySetTimeout(() => {
console.log('This message is displayed after 2 seconds.');
}, 2000);
参考
- 窗口：settimeout() 方法 - mdn
- 窗口：setinterval() 方法 - mdn
- 窗口：clearinterval() 方法 - mdn
- 窗口：cleartimeout() 方法 - mdn
- 2715。超时取消 - leetcode
- 2725。间隔取消 - leetcode
- 2622。有时间限制的缓存 - leetcode
- 2627。反跳 - leetcode
- 2676。油门 - leetcode
- 速率限制 - wikipedia.org
- 28。实现clearalltimeout() - bfe.dev
- 4.实现基本的throttle() - bfe.dev
- 5.使用前导和尾随选项实现throttle() - bfe.dev
- 6.实现基本的 debounce() - bfe.dev
- 7.使用前导和尾随选项实现 debounce() - bfe.dev
- javascript 异步：练习、实践、解决方案 - w3resource
- 伟大的前端
