{"id":13447817,"url":"https://github.com/niksy/throttle-debounce","last_synced_at":"2025-05-14T01:04:40.678Z","repository":{"id":24854957,"uuid":"28270199","full_name":"niksy/throttle-debounce","owner":"niksy","description":"Throttle and debounce functions.","archived":false,"fork":false,"pushed_at":"2024-06-24T14:06:25.000Z","size":84,"stargazers_count":1038,"open_issues_count":6,"forks_count":107,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T01:09:48.612Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/niksy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-12-20T15:10:18.000Z","updated_at":"2025-03-23T10:09:14.000Z","dependencies_parsed_at":"2024-10-29T10:31:31.409Z","dependency_job_id":null,"html_url":"https://github.com/niksy/throttle-debounce","commit_stats":{"total_commits":82,"total_committers":17,"mean_commits":4.823529411764706,"dds":0.426829268292683,"last_synced_commit":"f60c45f6cc4848bebcb02800b34dc3708ccaa3c4"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niksy%2Fthrottle-debounce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niksy%2Fthrottle-debounce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niksy%2Fthrottle-debounce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niksy%2Fthrottle-debounce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/niksy","download_url":"https://codeload.github.com/niksy/throttle-debounce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247962460,"owners_count":21024862,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T05:01:27.588Z","updated_at":"2025-04-09T02:11:10.921Z","avatar_url":"https://github.com/niksy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Modules","模块"],"sub_categories":["Function","函数"],"readme":"# throttle-debounce\n\n[![Build Status][ci-img]][ci]\n[![BrowserStack Status][browserstack-img]][browserstack]\n[![Mentioned in Awesome Micro npm Packages][awesome-img]][awesome]\n\nThrottle and debounce functions.\n\nThis module is the same as [jquery-throttle-debounce][jquery-throttle-debounce]\n([with some differences](#differences-with-original-module)), but it’s\ntransferred to ES Modules and CommonJS format.\n\n## Install\n\n```sh\nnpm install throttle-debounce --save\n```\n\n## Usage\n\n### `throttle`\n\n```js\nimport { throttle } from 'throttle-debounce';\n\nconst throttleFunc = throttle(\n\t1000,\n\t(num) =\u003e {\n\t\tconsole.log('num:', num);\n\t},\n\t{ noLeading: false, noTrailing: false }\n);\n\n// Can also be used like this, because noLeading and noTrailing are false by default\nconst throttleFunc = throttle(1000, (num) =\u003e {\n\tconsole.log('num:', num);\n});\n\nthrottleFunc(1); // Will execute the callback\nthrottleFunc(2); // Won’t execute callback\nthrottleFunc(3); // Won’t execute callback\n\n// Will execute the callback, because noTrailing is false,\n// but if we set noTrailing to true, this callback won’t be executed\nthrottleFunc(4);\n\nsetTimeout(() =\u003e {\n\tthrottleFunc(10); // Will execute the callback\n}, 1200);\n\n// Output\n// num: 1\n// num: 4\n// num: 10\n```\n\n### `debounce`\n\n```js\nimport { debounce } from 'throttle-debounce';\n\nconst debounceFunc = debounce(\n\t1000,\n\t(num) =\u003e {\n\t\tconsole.log('num:', num);\n\t},\n\t{ atBegin: false }\n);\n\n// Can also be used like this, because atBegin is false by default\nconst debounceFunc = debounce(1000, (num) =\u003e {\n\tconsole.log('num:', num);\n});\n\n// Won’t execute the callback, because atBegin is false,\n// but if we set atBegin to true, this callback will be executed.\ndebounceFunc(1);\n\ndebounceFunc(2); // Won’t execute callback\ndebounceFunc(3); // Won’t execute callback\n\n// Will execute the callback,\n// but if we set atBegin to true, this callback won’t be executed.\ndebounceFunc(4);\n\nsetTimeout(() =\u003e {\n\tdebounceFunc(10); // Will execute the callback\n}, 1200);\n\n// Output\n// num: 4\n// num: 10\n```\n\n### Cancelling\n\nDebounce and throttle can both be cancelled by calling the `cancel` function.\n\n```js\nconst throttleFunc = throttle(300, () =\u003e {\n\t// Throttled function\n});\n\nthrottleFunc.cancel();\n\nconst debounceFunc = debounce(300, () =\u003e {\n\t// Debounced function\n});\n\ndebounceFunc.cancel();\n```\n\nThe logic that is being throttled or debounced will no longer be called.\n\nTo cancel only one upcoming debounced call, you can pass `upcomingOnly: true`\noption to `cancel` function:\n\n```js\nconst debounceFunc = debounce(300, () =\u003e {\n\t// Debounced function\n});\n\ndebounceFunc(); // will not be invoked\n\ndebounceFunc.cancel({ upcomingOnly: true });\n\ndebounceFunc(); // will be invoked\n```\n\n## API\n\n### throttle(delay, callback, { noLeading, noTrailing, debounceMode })\n\nReturns: `Function`\n\nThrottle execution of a function. Especially useful for rate limiting execution\nof handlers on events like resize and scroll.\n\n#### delay\n\nType: `Number`\n\nA zero-or-greater delay in milliseconds. For event callbacks, values around 100\nor 250 (or even higher) are most useful.\n\n#### callback\n\nType: `Function`\n\nA function to be executed after delay milliseconds. The `this` context and all\narguments are passed through, as-is, to `callback` when the throttled-function\nis executed.\n\n#### noTrailing\n\nType: `Boolean`\n\nOptional, defaults to false. If noTrailing is true, callback will only execute\nevery `delay` milliseconds while the throttled-function is being called. If\nnoTrailing is false or unspecified, callback will be executed one final time\nafter the last throttled-function call. (After the throttled-function has not\nbeen called for `delay` milliseconds, the internal counter is reset)\n\n#### noLeading\n\nType: `Boolean`\n\nOptional, defaults to false. If noLeading is false, the first throttled-function\ncall will execute callback immediately. If noLeading is true, the first the\ncallback execution will be skipped. It should be noted that callback will never\nexecuted if both noLeading = true and noTrailing = true.\n\n#### debounceMode\n\nType: `Boolean`\n\nIf `debounceMode` is true (at begin), schedule `clear` to execute after `delay`\nms. If `debounceMode` is false (at end), schedule `callback` to execute after\n`delay` ms.\n\n### debounce(delay, callback, { atBegin })\n\nReturns: `Function`\n\nDebounce execution of a function. Debouncing, unlike throttling, guarantees that\na function is only executed a single time, either at the very beginning of a\nseries of calls, or at the very end.\n\n#### delay\n\nType: `Number`\n\nA zero-or-greater delay in milliseconds. For event callbacks, values around 100\nor 250 (or even higher) are most useful.\n\n#### callback\n\nType: `Function`\n\nA function to be executed after delay milliseconds. The `this` context and all\narguments are passed through, as-is, to `callback` when the debounced-function\nis executed.\n\n#### atBegin\n\nType: `Boolean`\n\nOptional, defaults to false. If `atBegin` is false or unspecified, callback will\nonly be executed `delay` milliseconds after the last debounced-function call. If\n`atBegin` is true, callback will be executed only at the first\ndebounced-function call. (After the throttled-function has not been called for\n`delay` milliseconds, the internal counter is reset).\n\n## Differences with original module\n\n-   Dependancy on jQuery is removed, so if you rely on GUIDs set by jQuery, plan\n    accordingly\n-   There is no standalone version available, so don’t rely on `$.throttle` and\n    `$.debounce` to be available\n\n## Browser support\n\nTested in Chrome 72, Edge 15, Firefox 65 and should work in all modern browsers\n([support based on Browserslist configuration](https://browserslist.dev/?q=bGFzdCAzIG1ham9yIHZlcnNpb25zLCBzaW5jZSAyMDE5LCBlZGdlID49IDE1LCBub3QgaWUgPiAw)).\n\n## Test\n\nFor automated tests, run `npm run test:automated` (append `:watch` for watcher\nsupport).\n\n## License\n\n\u003c!-- prettier-ignore-start --\u003e\n\nMIT © [Ivan Nikolić](http://ivannikolic.com)\n\n[ci]: https://github.com/niksy/throttle-debounce/actions?query=workflow%3ACI\n[ci-img]: https://github.com/niksy/throttle-debounce/actions/workflows/ci.yml/badge.svg?branch=master\n[browserstack]: https://www.browserstack.com/\n[browserstack-img]: https://img.shields.io/badge/browser%20testing-BrowserStack-informational?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgPGRlZnMvPgogIDxyYWRpYWxHcmFkaWVudCBpZD0iYSIgY3g9IjIwLjk0Mjk3NiIgY3k9IjI4LjA5NDY3ODczIiByPSIzLjc5MTM0MTQxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM3OTc5NzkiLz4KICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI5LjcyOTIwNCAtNTcuMTg3NjExKSBzY2FsZSgyLjk3MjkyKSI+CiAgICA8Y2lyY2xlIGN4PSIyMC43ODkiIGN5PSIzMC4wMjUiIHI9IjEwLjczOSIgZmlsbD0iI2Y0Yjk2MCIvPgogICAgPGNpcmNsZSBjeD0iMTkuNyIgY3k9IjI4LjkzNiIgcj0iOS43IiBmaWxsPSIjZTY2ZjMyIi8+CiAgICA8Y2lyY2xlIGN4PSIyMS4wMzYiIGN5PSIyNy42OTkiIHI9IjguNDEzIiBmaWxsPSIjZTQzYzQxIi8+CiAgICA8Y2lyY2xlIGN4PSIyMS42NzkiIGN5PSIyOC4zNDIiIHI9IjcuNzIiIGZpbGw9IiNiZGQwNDEiLz4KICAgIDxjaXJjbGUgY3g9IjIxLjEzNSIgY3k9IjI4LjkzNiIgcj0iNy4xNzYiIGZpbGw9IiM2ZGI1NGMiLz4KICAgIDxjaXJjbGUgY3g9IjE5Ljk5NyIgY3k9IjI3Ljc0OCIgcj0iNS45ODgiIGZpbGw9IiNhZWRhZTYiLz4KICAgIDxjaXJjbGUgY3g9IjIwLjkzNyIgY3k9IjI2Ljc1OCIgcj0iNS4wNDgiIGZpbGw9IiM1NmI4ZGUiLz4KICAgIDxjaXJjbGUgY3g9IjIxLjU4IiBjeT0iMjcuNDUxIiByPSI0LjQwNSIgZmlsbD0iIzAwYjFkNSIvPgogICAgPGNpcmNsZSBjeD0iMjAuOTM3IiBjeT0iMjguMDQ1IiByPSIzLjc2MSIgZmlsbD0idXJsKCNhKSIvPgogICAgPGNpcmNsZSBjeD0iMjAuOTM3IiBjeT0iMjguMDQ1IiByPSIzLjc2MSIgZmlsbD0iIzIyMWYxZiIvPgogICAgPGVsbGlwc2UgY3g9Ii0xNS4xNTkiIGN5PSIzMS40MDEiIGZpbGw9IiNmZmYiIHJ4PSIxLjE4OCIgcnk9Ii43NDIiIHRyYW5zZm9ybT0icm90YXRlKC02NS44MzQpIi8+CiAgPC9nPgo8L3N2Zz4K\n[awesome]: https://github.com/parro-it/awesome-micro-npm-packages\n[awesome-img]: https://awesome.re/mentioned-badge.svg\n[jquery-throttle-debounce]: https://github.com/cowboy/jquery-throttle-debounce\n\n\u003c!-- prettier-ignore-end --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniksy%2Fthrottle-debounce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fniksy%2Fthrottle-debounce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniksy%2Fthrottle-debounce/lists"}