leetcode-problemset/leetcode-cn/originData/debounce.json

{
    "data": {
        "question": {
            "questionId": "2743",
            "questionFrontendId": "2627",
            "categoryTitle": "JavaScript",
            "boundTopicId": 2222281,
            "title": "Debounce",
            "titleSlug": "debounce",
            "content": "<p>Given a function&nbsp;<code>fn</code> and a time in milliseconds&nbsp;<code>t</code>, return&nbsp;a&nbsp;<strong>debounced</strong>&nbsp;version of that function.</p>\n\n<p>A&nbsp;<strong>debounced</strong>&nbsp;function is a function whose execution is delayed by&nbsp;<code>t</code>&nbsp;milliseconds and whose&nbsp;execution is cancelled if it is called again within that window of time. The debounced function should also receive the passed parameters.</p>\n\n<p>For example, let&#39;s say&nbsp;<code>t = 50ms</code>, and the function was called at&nbsp;<code>30ms</code>,&nbsp;<code>60ms</code>, and <code>100ms</code>. The first 2 function calls would be cancelled, and the 3rd function call would be executed at&nbsp;<code>150ms</code>. If instead&nbsp;<code>t = 35ms</code>, The 1st call would be cancelled, the 2nd would be executed at&nbsp;<code>95ms</code>, and the 3rd would be executed at&nbsp;<code>135ms</code>.</p>\n\n<p><img alt=\"Debounce Schematic\" src=\"https://assets.leetcode.com/uploads/2023/04/08/screen-shot-2023-04-08-at-11048-pm.png\" style=\"width: 800px; height: 242px;\" /></p>\n\n<p>The above diagram&nbsp;shows how debounce will transform&nbsp;events. Each rectangle represents 100ms and the debounce time is 400ms. Each color represents a different set of inputs.</p>\n\n<p>Please solve it without using lodash&#39;s&nbsp;<code>_.debounce()</code> function.</p>\n\n<p>&nbsp;</p>\n<p><strong class=\"example\">Example 1:</strong></p>\n\n<pre>\n<strong>Input:</strong> \nt = 50\ncalls = [\n&nbsp; {&quot;t&quot;: 50, inputs: [1]},\n&nbsp; {&quot;t&quot;: 75, inputs: [2]}\n]\n<strong>Output:</strong> [{&quot;t&quot;: 125, inputs: [2]}]\n<strong>Explanation:</strong>\nlet start = Date.now();\nfunction log(...inputs) { \n&nbsp; console.log([Date.now() - start, inputs ])\n}\nconst dlog = debounce(log, 50);\nsetTimeout(() =&gt; dlog(1), 50);\nsetTimeout(() =&gt; dlog(2), 75);\n\nThe 1st call is cancelled by the 2nd call because the 2nd call occurred before 100ms\nThe 2nd call is delayed by 50ms and executed at 125ms. The inputs were (2).\n</pre>\n\n<p><strong class=\"example\">Example 2:</strong></p>\n\n<pre>\n<strong>Input:</strong> \nt = 20\ncalls = [\n&nbsp; {&quot;t&quot;: 50, inputs: [1]},\n&nbsp; {&quot;t&quot;: 100, inputs: [2]}\n]\n<strong>Output:</strong> [{&quot;t&quot;: 70, inputs: [1]}, {&quot;t&quot;: 120, inputs: [2]}]\n<strong>Explanation:</strong>\nThe 1st call is delayed until 70ms. The inputs were (1).\nThe 2nd call is delayed until 120ms. The inputs were (2).\n</pre>\n\n<p><strong class=\"example\">Example 3:</strong></p>\n\n<pre>\n<strong>Input:</strong> \nt = 150\ncalls = [\n&nbsp; {&quot;t&quot;: 50, inputs: [1, 2]},\n&nbsp; {&quot;t&quot;: 300, inputs: [3, 4]},\n&nbsp; {&quot;t&quot;: 300, inputs: [5, 6]}\n]\n<strong>Output:</strong> [{&quot;t&quot;: 200, inputs: [1,2]}, {&quot;t&quot;: 450, inputs: [5, 6]}]\n<strong>Explanation:</strong>\nThe 1st call is delayed by 150ms and ran at 200ms. The inputs were (1, 2).\nThe 2nd call is cancelled by the 3rd call\nThe 3rd call is delayed by 150ms and ran at 450ms. The inputs were (5, 6).\n</pre>\n\n<p>&nbsp;</p>\n<p><strong>Constraints:</strong></p>\n\n<ul>\n\t<li><code>0 &lt;= t &lt;= 1000</code></li>\n\t<li><code>1 &lt;= calls.length &lt;= 10</code></li>\n\t<li><code>0 &lt;= calls[i].t &lt;= 1000</code></li>\n\t<li><code>0 &lt;= calls[i].inputs.length &lt;= 10</code></li>\n</ul>\n",
            "translatedTitle": "函数防抖",
            "translatedContent": "<p>请你编写一个函数，接收参数为另一个函数和一个以毫秒为单位的时间 <code>t</code> ，并返回该函数的&nbsp;<b>函数防抖&nbsp;</b>后的结果。</p>\n\n<p><b>函数防抖 </b>方法是一个函数，它的执行被延迟了 <code>t</code> 毫秒，如果在这个时间窗口内再次调用它，它的执行将被取消。你编写的防抖函数也应该接收传递的参数。</p>\n\n<p>例如，假设 <code>t = 50ms</code> ，函数分别在 <code>30ms</code> 、 <code>60ms</code> 和 <code>100ms</code> 时调用。前两个函数调用将被取消，第三个函数调用将在 <code>150ms</code> 执行。如果改为 <code>t = 35ms</code> ，则第一个调用将被取消，第二个调用将在 <code>95ms</code> 执行，第三个调用将在 <code>135ms</code> 执行。</p>\n\n<p><img alt=\"Debounce Schematic\" src=\"https://assets.leetcode.com/uploads/2023/04/08/screen-shot-2023-04-08-at-11048-pm.png\" style=\"width: 800px; height: 242px;\" /></p>\n\n<p>上图展示了了防抖函数是如何转换事件的。其中，每个矩形表示 100ms，反弹时间为 400ms。每种颜色代表一组不同的输入。</p>\n\n<p>请在不使用 lodash 的 <code>_.debounce()</code> 函数的前提下解决该问题。</p>\n\n<p>&nbsp;</p>\n\n<p><strong class=\"example\">示例 1：</strong></p>\n\n<pre>\n<b>输入：</b>\nt = 50\ncalls = [\n&nbsp; {\"t\": 50, inputs: [1]},\n&nbsp; {\"t\": 75, inputs: [2]}\n]\n<b>输出：</b>[{\"t\": 125, inputs: [2]}]\n<strong>解释：</strong>\nlet start = Date.now();\nfunction log(...inputs) { \n&nbsp; console.log([Date.now() - start, inputs ])\n}\nconst dlog = debounce(log, 50);\nsetTimeout(() =&gt; dlog(1), 50);\nsetTimeout(() =&gt; dlog(2), 75);\n\n第一次调用被第二次调用取消，因为第二次调用发生在 100ms 之前\n第二次调用延迟 50ms，在 125ms 执行。输入为 (2)。\n</pre>\n\n<p><strong class=\"example\">示例 2：</strong></p>\n\n<pre>\n<b>输入：</b>\nt = 20\ncalls = [\n&nbsp; {\"t\": 50, inputs: [1]},\n&nbsp; {\"t\": 100, inputs: [2]}\n]\n<b>输出：</b>[{\"t\": 70, inputs: [1]}, {\"t\": 120, inputs: [2]}]\n<strong>解释：</strong>\n第一次调用延迟到 70ms。输入为 (1)。\n第二次调用延迟到 120ms。输入为 (2)。\n</pre>\n\n<p><strong class=\"example\">示例 3：</strong></p>\n\n<pre>\n<b>输入：</b>\nt = 150\ncalls = [\n&nbsp; {\"t\": 50, inputs: [1, 2]},\n&nbsp; {\"t\": 300, inputs: [3, 4]},\n&nbsp; {\"t\": 300, inputs: [5, 6]}\n]\n<b>输出：</b>[{\"t\": 200, inputs: [1,2]}, {\"t\": 450, inputs: [5, 6]}]\n<strong>解释：</strong>\n第一次调用延迟了 150ms，运行时间为 200ms。输入为 (1, 2)。\n第二次调用被第三次调用取消\n第三次调用延迟了 150ms，运行时间为 450ms。输入为 (5, 6)。\n</pre>\n\n<p>&nbsp;</p>\n\n<p><strong>提示：</strong></p>\n\n<ul>\n\t<li><code>0 &lt;= t &lt;= 1000</code></li>\n\t<li><code>1 &lt;= calls.length &lt;= 10</code></li>\n\t<li><code>0 &lt;= calls[i].t &lt;= 1000</code></li>\n\t<li><code>0 &lt;= calls[i].inputs.length &lt;= 10</code></li>\n</ul>\n",
            "isPaidOnly": false,
            "difficulty": "Medium",
            "likes": 4,
            "dislikes": 0,
            "isLiked": null,
            "similarQuestions": "[]",
            "contributors": [],
            "langToValidPlayground": "{\"cpp\": true, \"java\": true, \"python\": true, \"python3\": true, \"mysql\": false, \"mssql\": false, \"oraclesql\": false, \"c\": false, \"csharp\": false, \"javascript\": false, \"typescript\": false, \"bash\": false, \"php\": false, \"swift\": false, \"kotlin\": false, \"dart\": false, \"golang\": false, \"ruby\": false, \"scala\": false, \"html\": false, \"pythonml\": false, \"rust\": false, \"racket\": false, \"erlang\": false, \"elixir\": false, \"pythondata\": false, \"react\": false, \"vanillajs\": false, \"postgresql\": false}",
            "topicTags": [],
            "companyTagStats": null,
            "codeSnippets": [
                {
                    "lang": "JavaScript",
                    "langSlug": "javascript",
                    "code": "/**\n * @param {Function} fn\n * @param {number} t milliseconds\n * @return {Function}\n */\nvar debounce = function(fn, t) {\n    \n    return function(...args) {\n        \n    }\n};\n\n/**\n * const log = debounce(console.log, 100);\n * log('Hello'); // cancelled\n * log('Hello'); // cancelled\n * log('Hello'); // Logged at t=100ms\n */",
                    "__typename": "CodeSnippetNode"
                },
                {
                    "lang": "TypeScript",
                    "langSlug": "typescript",
                    "code": "type F = (...args: number[]) => void\n\nfunction debounce(fn: F, t: number): F {\n    \n    return function(...args) {\n        \n    }\n};\n\n/**\n * const log = debounce(console.log, 100);\n * log('Hello'); // cancelled\n * log('Hello'); // cancelled\n * log('Hello'); // Logged at t=100ms\n */",
                    "__typename": "CodeSnippetNode"
                }
            ],
            "stats": "{\"totalAccepted\": \"4.9K\", \"totalSubmission\": \"6.4K\", \"totalAcceptedRaw\": 4885, \"totalSubmissionRaw\": 6434, \"acRate\": \"75.9%\"}",
            "hints": [
                "You execute code with a delay with \"ref = setTimeout(fn, delay)\". You can abort the execution of that code with \"clearTimeout(ref)\"",
                "Whenever you call the function, you should abort any existing scheduled code. Then, you should schedule code to be executed after some delay."
            ],
            "solution": null,
            "status": null,
            "sampleTestCase": "50\n[{\"t\":50,\"inputs\":[1]},{\"t\":75,\"inputs\":[2]}]",
            "metaData": "{\n  \"name\": \"debounce\",\n  \"params\": [\n    {\n      \"name\": \"fn\",\n      \"type\": \"string\"\n    },\n    {\n      \"type\": \"integer\",\n      \"name\": \"t\"\n    }\n  ],\n  \"return\": {\n    \"type\": \"string\"\n  },\n  \"manual\": true,\n  \"languages\": [\n    \"javascript\",\n    \"typescript\"\n  ]\n}",
            "judgerAvailable": true,
            "judgeType": "large",
            "mysqlSchemas": [],
            "enableRunCode": true,
            "envInfo": "{\"javascript\":[\"JavaScript\",\"<p>\\u7248\\u672c\\uff1a<code>Node.js 16.13.2<\\/code><\\/p>\\r\\n\\r\\n<p>\\u60a8\\u7684\\u4ee3\\u7801\\u5728\\u6267\\u884c\\u65f6\\u5c06\\u5e26\\u4e0a <code>--harmony<\\/code> \\u6807\\u8bb0\\u6765\\u5f00\\u542f <a href=\\\"http:\\/\\/node.green\\/\\\" target=\\\"_blank\\\">\\u65b0\\u7248ES6\\u7279\\u6027<\\/a>\\u3002<\\/p>\\r\\n\\r\\n<p><a href=\\\"https:\\/\\/lodash.com\\\" target=\\\"_blank\\\">lodash.js<\\/a> \\u5e93\\u5df2\\u7ecf\\u9ed8\\u8ba4\\u88ab\\u5305\\u542b\\u3002<\\/p>\\r\\n\\r\\n<p> \\u5982\\u9700\\u4f7f\\u7528\\u961f\\u5217\\/\\u4f18\\u5148\\u961f\\u5217\\uff0c\\u60a8\\u53ef\\u4f7f\\u7528 <a href=\\\"https:\\/\\/github.com\\/datastructures-js\\/priority-queue\\/tree\\/fb4fdb984834421279aeb081df7af624d17c2a03\\\" target=\\\"_blank\\\"> datastructures-js\\/priority-queue@5.3.0<\\/a> \\u548c <a href=\\\"https:\\/\\/github.com\\/datastructures-js\\/queue\\/tree\\/e63563025a5a805aa16928cb53bcd517bfea9230\\\" target=\\\"_blank\\\"> datastructures-js\\/queue@4.2.1<\\/a>\\u3002<\\/p>\"],\"typescript\":[\"TypeScript\",\"<p>TypeScript 5.1.6<\\/p>\\r\\n\\r\\n<p>Compile Options: --alwaysStrict --strictBindCallApply --strictFunctionTypes --target ES2022<\\/p>\\r\\n\\r\\n<p><a href=\\\"https:\\/\\/lodash.com\\\" target=\\\"_blank\\\">lodash.js<\\/a> \\u5e93\\u5df2\\u7ecf\\u9ed8\\u8ba4\\u88ab\\u5305\\u542b\\u3002<\\/p>\\r\\n\\r\\n<p> \\u5982\\u9700\\u4f7f\\u7528\\u961f\\u5217\\/\\u4f18\\u5148\\u961f\\u5217\\uff0c\\u60a8\\u53ef\\u4f7f\\u7528 <a href=\\\"https:\\/\\/github.com\\/datastructures-js\\/priority-queue\\/tree\\/fb4fdb984834421279aeb081df7af624d17c2a03\\\" target=\\\"_blank\\\"> datastructures-js\\/priority-queue@5.3.0<\\/a> \\u548c <a href=\\\"https:\\/\\/github.com\\/datastructures-js\\/queue\\/tree\\/e63563025a5a805aa16928cb53bcd517bfea9230\\\" target=\\\"_blank\\\"> datastructures-js\\/queue@4.2.1<\\/a>\\u3002<\\/p>\"]}",
            "book": null,
            "isSubscribed": false,
            "isDailyQuestion": false,
            "dailyRecordStatus": null,
            "editorType": "CKEDITOR",
            "ugcQuestionId": null,
            "style": "LEETCODE",
            "exampleTestcases": "50\n[{\"t\":50,\"inputs\":[1]},{\"t\":75,\"inputs\":[2]}]\n20\n[{\"t\":50,\"inputs\":[1]},{\"t\":100,\"inputs\":[2]}]\n150\n[{\"t\":50,\"inputs\":[1,2]},{\"t\":300,\"inputs\":[3,4]},{\"t\":300,\"inputs\":[5,6]}]",
            "__typename": "QuestionNode"
        }
    }
}