2023-12-09 18:42:21 +08:00
< p > Given a function < code > fn< / code > , an array of arguments < code > args< / code > , and an interval time < code > t< / code > , return a cancel function < code > cancelFn< / code > .< / p >
< p > The function < code > fn< / code > should be called with < code > args< / code > immediately and then called again every < code > t< / code > milliseconds until < code > cancelFn< / code > is called at < code > cancelTimeMs< / code > ms.< / p >
2023-06-12 23:05:37 +08:00
< p > < / p >
< p > < strong class = "example" > Example 1:< / strong > < / p >
< pre >
2023-12-09 18:42:21 +08:00
< strong > Input:< / strong > fn = (x) => x * 2, args = [4], t = 35
2023-06-12 23:05:37 +08:00
< strong > Output:< / strong >
[
{" time" : 0, " returned" : 8},
2023-12-09 18:42:21 +08:00
{" time" : 35, " returned" : 8},
{" time" : 70, " returned" : 8},
{" time" : 105, " returned" : 8},
{" time" : 140, " returned" : 8},
{" time" : 175, " returned" : 8}
2023-06-12 23:05:37 +08:00
]
2023-12-09 18:42:21 +08:00
< strong > Explanation:< / strong >
const result = [];
const fn = (x) => x * 2;
const cancelTimeMs = 190;
const start = performance.now();
const log = (...argsArr) => {
const diff = Math.floor(performance.now() - start);
result.push({" time" : diff, " returned" : fn(...argsArr)});
}
2023-06-12 23:05:37 +08:00
2023-12-09 18:42:21 +08:00
const cancel = cancellable(log, [4], 35);
setTimeout(cancel, cancelTimeMs);
2023-06-12 23:05:37 +08:00
2023-12-09 18:42:21 +08:00
setTimeout(() => {
console.log(result); // Output
}, cancelTimeMs + 50)
Every 35ms, fn(4) is called. Until t=190ms, then it is cancelled.
2023-06-12 23:05:37 +08:00
1st fn call is at 0ms. fn(4) returns 8.
2023-12-09 18:42:21 +08:00
2nd fn call is at 35ms. fn(4) returns 8.
3rd fn call is at 70ms. fn(4) returns 8.
4th fn call is at 105ms. fn(4) returns 8.
5th fn call is at 140ms. fn(4) returns 8.
6th fn call is at 175ms. fn(4) returns 8.
Cancelled at 190ms
2023-06-12 23:05:37 +08:00
< / pre >
< p > < strong class = "example" > Example 2:< / strong > < / p >
< pre >
2023-12-09 18:42:21 +08:00
< strong > Input:< / strong > fn = (x1, x2) => (x1 * x2), args = [2, 5], t = 30
2023-06-12 23:05:37 +08:00
< strong > Output:< / strong >
[
{" time" : 0, " returned" : 10},
2023-12-09 18:42:21 +08:00
{" time" : 30, " returned" : 10},
{" time" : 60, " returned" : 10},
{" time" : 90, " returned" : 10},
{" time" : 120, " returned" : 10},
{" time" : 150, " returned" : 10}
2023-06-12 23:05:37 +08:00
]
2023-12-09 18:42:21 +08:00
< strong > Explanation:< / strong >
const cancelTimeMs = 165;
Every 30ms, fn(2, 5) is called. Until t=165ms, then it is cancelled.
2023-06-12 23:05:37 +08:00
1st fn call is at 0ms
2023-12-09 18:42:21 +08:00
2nd fn call is at 30ms
3rd fn call is at 60ms
4th fn call is at 90ms
5th fn call is at 120ms
6th fn call is at 150ms
Cancelled at 165ms
2023-06-12 23:05:37 +08:00
< / pre >
< p > < strong class = "example" > Example 3:< / strong > < / p >
< pre >
2023-12-09 18:42:21 +08:00
< strong > Input:< / strong > fn = (x1, x2, x3) => (x1 + x2 + x3), args = [5, 1, 3], t = 50
2023-06-12 23:05:37 +08:00
< strong > Output:< / strong >
[
{" time" : 0, " returned" : 9},
{" time" : 50, " returned" : 9},
{" time" : 100, " returned" : 9},
{" time" : 150, " returned" : 9}
]
2023-12-09 18:42:21 +08:00
< strong > Explanation:< / strong >
const cancelTimeMs = 180;
Every 50ms, fn(5, 1, 3) is called. Until t=180ms, then it is cancelled.
2023-06-12 23:05:37 +08:00
1st fn call is at 0ms
2nd fn call is at 50ms
3rd fn call is at 100ms
4th fn call is at 150ms
Cancelled at 180ms
< / pre >
< p > < / p >
< p > < strong > Constraints:< / strong > < / p >
< ul >
2023-12-09 18:42:21 +08:00
< li > < code > fn< / code > is a function< / li >
< li > < code > args< / code > is a valid JSON array< / li >
2023-06-12 23:05:37 +08:00
< li > < code > 1 < = args.length < = 10< / code > < / li >
2023-12-09 18:42:21 +08:00
< li > < code > < font face = "monospace" > 30 < = t < = 100< / font > < / code > < / li >
< li > < code > < font face = "monospace" > 10 < = < / font > cancelTimeMs< font face = "monospace" > < = 500< / font > < / code > < / li >
2023-06-12 23:05:37 +08:00
< / ul >
