36. 实现一个 fake timer(setTimeout)
分享给更多人
中等难度 -通过 / -执行
setTimeout
可以设定未来的任务,但是其执行时间并不精确。(Event Loop)。
大多数时候这都不是问题,但是在test的时候却有些头疼。
比如,5. 手写throttle()并支持leading 和 trailing 中我们就需要比较精确的测试。
你能否实现一个静态化的setTimeout()
和clearTimeout()
,而不再有Event Loop的问题。这也正是FakeTimes 的用途。
“精确”的意思是,“假设所有的函数的执行耗时为0,同时时间戳从0开始,那么setTimeout(func1, 100)
将会精确的在时间戳:100进行执行func1"。
你需要同时修改Date.now()
来提供新的时间戳。
class FakeTimer { install() { // setTimeout(), clearTimeout(), and Date.now() // are replaced } uninstall() { // restore the original APIs // setTimeout(), clearTimeout() and Date.now() } tick() { // run all the schedule functions in order }}
输入的代码将会大概像这样进行测试。
const fakeTimer = new FakeTimer()fakeTimer.install()const logs = []const log = (arg) => { logs.push([Date.now(), arg])}setTimeout(() => log('A'), 100)// log 'A' at 100const b = setTimeout(() => log('B'), 110)clearTimeout(b)// b is set but clearedsetTimeout(() => log('C'), 200)expect(logs).toEqual([[100, 'A'], [200, 'C']])fakeTimer.uninstall()
注意
测试的时候只会用到Date.now()
,其他的时间相关的函数可以忽略。