间隔取消

142 阅读2分钟

前言:锻炼自己的思想,规范自己的编程思路。

问题:

现给定一个函数 fn,一个参数数组 args 和一个时间间隔 t,返回一个取消函数 cancelFn。函数 fn 应该立即使用 args 调用,并且在每个 t 毫秒内再次调用,直到调用 cancelFn。

示例:

输入:fn = (x) => x * 2, args = [4], t = 20, cancelT = 110
输出:
[
   {"time": 0, "returned": 8},
   {"time": 20, "returned": 8},
   {"time": 40, "returned": 8},
   {"time": 60, "returned": 8},
   {"time": 80, "returned": 8},
   {"time": 100, "returned": 8}
]
解释: 每隔 20ms,调用 fn(4)。直到 t=110ms,然后取消。
const cancel = cancellable(x => x * 2, [4], 20);
setTimeout(cancel, 110);
第一次调用 fn 是在 0ms。fn(4) 返回 8。
第二次调用 fn 是在 20ms。fn(4) 返回 8。
第三次调用 fn 是在 40ms。fn(4) 返回 8。
第四次调用 fn 是在 60ms。fn(4) 返回 8。
第五次调用 fn 是在 80ms。fn(4) 返回 8。
第六次调用 fn 是在 100ms。fn(4) 返回 8。

image-20230609205649156.png 思路:

这个题目首先立即调用函数 fn,并使用 ... 运算符将参数数组args 展开为函数的参数。

接下来,使用 setInterval 函数设置一个定时器,每隔 t 毫秒调用一次函数 fn。setInterval 函数返回一个定时器 ID,我们可以将其存储在变量 id 中。

最后,返回一个名为cancelFn的函数。当调用该函数时,它会使用clearInterval 函数来清除定时器,从而停止定时调用函数fn。

基于上述思考,代码如下:

var cancellable = function(fn, args, t) {
  fn(...args);
  let id = setInterval(() => fn(...args), t);
  return function cancelFn() {
    clearInterval(id);
  };
}

执行结果如下图: image-20230609205649156.png 你的代码真是太无敌啦!第一次出现哈哈哈。 结论:

巩固的知识点:

setInterval 函数用于设置一个定时器,它可以在指定的时间间隔内重复调用一个函数。这个函数接受两个参数:一个回调函数和一个时间间隔(以毫秒为单位,需要自己换算)。

当调用setInterval 函数时,它会返回一个定时器 ID。您可以使用该 ID 来清除定时器,以停止定时调用回调函数。

clearInterval 函数用于清除由 setInterval 函数设置的定时器。该函数接受一个参数:定时器 ID。

当您调用setInterval 函数时,它会返回一个定时器 ID。您可以使用该 ID 来清除定时器,以停止定时调用回调函数。

setInterval 和clearInterval 一般是成对使用的。