{ "data": { "question": { "questionId": "2771", "questionFrontendId": "2676", "categoryTitle": "JavaScript", "boundTopicId": 2267103, "title": "Throttle", "titleSlug": "throttle", "content": "
Given a function fn
and a time in milliseconds t
, return a throttled version of that function.
A throttled function is first called without delay and then, for a time interval of t
milliseconds, can't be executed but should store the latest function arguments provided to call fn
with them after the end of the delay.
For instance, t = 50ms
, and the function was called at 30ms
, 40ms
, and 60ms
. The first function call would block calling functions for the following t
milliseconds. The second function call would save arguments, and the third call arguments should overwrite currently stored arguments from the second call because the second and third calls are called before 80ms
. Once the delay has passed, the throttled function should be called with the latest arguments provided during the delay period, and it should also create another delay period of 80ms + t
.
The above diagram shows how throttle will transform events. Each rectangle represents 100ms and the throttle time is 400ms. Each color represents a different set of inputs.
\n\n\n
Example 1:
\n\n\nInput: t = 100, calls = [{"t":20,"inputs":[1]}]\nOutput: [{"t":20,"inputs":[1]}]\nExplanation: The 1st call is always called without delay\n\n\n
Example 2:
\n\n\nInput: t = 50, calls = [{"t":50,"inputs":[1]},{"t":75,"inputs":[2]}]\nOutput: [{"t":50,"inputs":[1]},{"t":100,"inputs":[2]}]\nExplanation: \nThe 1st is called a function with arguments (1) without delay.\nThe 2nd is called at 75ms, within the delay period because 50ms + 50ms = 100ms, so the next call can be reached at 100ms. Therefore, we save arguments from the 2nd call to use them at the callback of the 1st call.\n\n\n
Example 3:
\n\n\nInput: t = 70, calls = [{"t":50,"inputs":[1]},{"t":75,"inputs":[2]},{"t":90,"inputs":[8]},{"t": 140, "inputs":[5,7]},{"t": 300, "inputs": [9,4]}]\nOutput: [{"t":50,"inputs":[1]},{"t":120,"inputs":[8]},{"t":190,"inputs":[5,7]},{"t":300,"inputs":[9,4]}]\nExplanation: \nThe 1st is called a function with arguments (1) without delay.\nThe 2nd is called at 75ms within the delay period because 50ms + 70ms = 120ms, so it should only save arguments. \nThe 3rd is also called within the delay period, and because we need just the latest function arguments, we overwrite previous ones. After the delay period, we do a callback at 120ms with saved arguments. That callback makes another delay period of 120ms + 70ms = 190ms so that the next function can be called at 190ms.\nThe 4th is called at 140ms in the delay period, so it should be called as a callback at 190ms. That will create another delay period of 190ms + 70ms = 260ms.\nThe 5th is called at 300ms, but it is after 260ms, so it should be called immediately and should create another delay period of 300ms + 70ms = 370ms.\n\n
\n
Constraints:
\n\n0 <= t <= 1000
1 <= calls.length <= 10
0 <= calls[i].t <= 1000
0 <= calls[i].inputs[i], calls[i].inputs.length <= 10
现给定一个函数 fn
和一个以毫秒为单位的时间 t
,请你返回该函数的 节流 版本。
节流 函数首先立即被调用,然后在 t
毫秒的时间间隔内不能再次执行,但应该存储最新的函数参数,以便在延迟结束后使用这些参数调用 fn
。
例如,t = 50ms
,并且函数在 30ms
、 40ms
和 60ms
时被调用。第一次函数调用会在接下来的 t
毫秒内阻止调用函数。第二次函数调用会保存参数,而第三次调用的参数应该覆盖当前保存的第二次调用的参数,因为第二次和第三次调用发生在 80ms
之前。一旦延迟时间过去,节流函数应该使用延迟期间提供的最新参数进行调用,并且还应创建另一个延迟期间,时长为 80ms + t
。
上面的图示展示了节流如何转换事件。每个矩形代表100毫秒,节流时间为400毫秒。每种颜色代表不同的输入集合。
\n\n\n\n
示例 1:
\n\n\n输入:t = 100, calls = [{\"t\":20,\"inputs\":[1]}]\n输出:[{\"t\":20,\"inputs\":[1]}]\n解释:第一次调用总是立即执行,没有延迟。\n\n\n
示例 2:
\n\n\n输入:t = 50, calls = [{\"t\":50,\"inputs\":[1]},{\"t\":75,\"inputs\":[2]}]\n输出:[{\"t\":50,\"inputs\":[1]},{\"t\":100,\"inputs\":[2]}]\n解释:\n第一次调用立即执行带有参数 (1) 的函数。 \n第二次调用发生在 75毫秒 时,在延迟期间内,因为 50毫秒 + 50毫秒 = 100毫秒,所以下一次调用可以在 100毫秒 时执行。因此,我们保存第二次调用的参数,以便在第一次调用的回调函数中使用。\n\n\n
示例 3:
\n\n\n输入:t = 70, calls = [{\"t\":50,\"inputs\":[1]},{\"t\":75,\"inputs\":[2]},{\"t\":90,\"inputs\":[8]},{\"t\": 140, \"inputs\":[5,7]},{\"t\": 300, \"inputs\": [9,4]}]\n输出:[{\"t\":50,\"inputs\":[1]},{\"t\":120,\"inputs\":[8]},{\"t\":190,\"inputs\":[5,7]},{\"t\":300,\"inputs\":[9,4]}]\n解释:\n第一次调用立即执行带有参数 (1) 的函数。 \n第二次调用发生在 75毫秒 时,在延迟期间内,因为 50毫秒 + 70毫秒 = 120毫秒,所以它只应保存参数。 \n第三次调用也在延迟期间内,因为我们只需要最新的函数参数,所以覆盖之前的参数。延迟期过后,在 120毫秒时进行回调,并使用保存的参数进行调用。该回调会创建另一个延迟期间,时长为 120毫秒 + 70毫秒 = 190毫秒,以便下一个函数可以在 190毫秒时调用。 \n第四次调用发生在 140毫秒,在延迟期间内,因此应在190毫秒时作为回调进行调用。这将创建另一个延迟期间,时长为 190毫秒 + 70毫秒 = 260毫秒。 \n第五次调用发生在 300毫秒,但它是在 260毫秒 之后,所以应立即调用,并创建另一个延迟期间,时长为 300毫秒 + 70毫秒 = 370毫秒。\n\n
\n\n
提示:
\n\n0 <= t <= 1000
1 <= calls.length <= 10
0 <= calls[i].t <= 1000
0 <= calls[i].inputs[i], calls[i].inputs.length <= 10
\\u7248\\u672c\\uff1a \\u60a8\\u7684\\u4ee3\\u7801\\u5728\\u6267\\u884c\\u65f6\\u5c06\\u5e26\\u4e0a lodash.js<\\/a> \\u5e93\\u5df2\\u7ecf\\u9ed8\\u8ba4\\u88ab\\u5305\\u542b\\u3002<\\/p>\\r\\n\\r\\n \\u5982\\u9700\\u4f7f\\u7528\\u961f\\u5217\\/\\u4f18\\u5148\\u961f\\u5217\\uff0c\\u60a8\\u53ef\\u4f7f\\u7528 datastructures-js\\/priority-queue@5.3.0<\\/a> \\u548c datastructures-js\\/queue@4.2.1<\\/a>\\u3002<\\/p>\"],\"typescript\":[\"TypeScript\",\" TypeScript 4.5.4<\\/p>\\r\\n\\r\\n Compile Options: --alwaysStrict --strictBindCallApply --strictFunctionTypes --target ES2020<\\/p>\\r\\n\\r\\n lodash.js<\\/a> \\u5e93\\u5df2\\u7ecf\\u9ed8\\u8ba4\\u88ab\\u5305\\u542b\\u3002<\\/p>\\r\\n\\r\\n \\u5982\\u9700\\u4f7f\\u7528\\u961f\\u5217\\/\\u4f18\\u5148\\u961f\\u5217\\uff0c\\u60a8\\u53ef\\u4f7f\\u7528 datastructures-js\\/priority-queue@5.3.0<\\/a> \\u548c datastructures-js\\/queue@4.2.1<\\/a>\\u3002<\\/p>\"]}",
"book": null,
"isSubscribed": false,
"isDailyQuestion": false,
"dailyRecordStatus": null,
"editorType": "CKEDITOR",
"ugcQuestionId": null,
"style": "LEETCODE",
"exampleTestcases": "100\n[{\"t\":20,\"inputs\":[1]}]\n50\n[{\"t\":50,\"inputs\":[1]},{\"t\":75,\"inputs\":[2]}]\n70\n[{\"t\":50,\"inputs\":[1]},{\"t\":75,\"inputs\":[2]},{\"t\":90,\"inputs\":[8]},{\"t\": 140, \"inputs\":[5,7]},{\"t\": 300, \"inputs\": [9,4]}]",
"__typename": "QuestionNode"
}
}
}Node.js 16.13.2<\\/code><\\/p>\\r\\n\\r\\n
--harmony<\\/code> \\u6807\\u8bb0\\u6765\\u5f00\\u542f \\u65b0\\u7248ES6\\u7279\\u6027<\\/a>\\u3002<\\/p>\\r\\n\\r\\n