https://github.com/singcl/throttle-debounce
🌰 throttle and debounce.
https://github.com/singcl/throttle-debounce
commonjs debounce eslint karma karma-coverage throttle
Last synced: about 2 months ago
JSON representation
🌰 throttle and debounce.
- Host: GitHub
- URL: https://github.com/singcl/throttle-debounce
- Owner: singcl
- License: mit
- Created: 2018-03-31T17:10:25.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T22:44:56.000Z (over 3 years ago)
- Last Synced: 2025-10-19T13:38:25.932Z (8 months ago)
- Topics: commonjs, debounce, eslint, karma, karma-coverage, throttle
- Language: JavaScript
- Homepage:
- Size: 835 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# throttle-debounce
[](https://www.travis-ci.org/singcl/throttle-debounce)
[](https://coveralls.io/github/singcl/throttle-debounce)
[](https://github.com/singcl/throttle-debounce)
Throttle/debounce your functions.
## 基本用法
- 使用方法一：UMD方式。lib 目录下是用webpack4.x打包的UMD模块，参照UMD模块的使用方法。
- 使用方法二：作为项目的依赖配合打包工具使用。
```sh
npm i @singcl/throttle-debounce --save
```
```js
// 基本用法示例
var throttle = require('@singcl/throttle-debounce/throttle')
var debounce = require('@singcl/throttle-debounce/debounce')
var throttled = throttle(500, function() {
// 该函数为需要节流的目标函数
})
var debounced = debounce(500, function() {
// 该函数为需要去抖的目标函数
})
// throttled 和 debounced 就是我们最终需要的函数。
```
## API
### throttle
#### throttle(delay, callback)
| 参数 | 数据类型 | 参数描述 |
|:-----:|:-------:|:--------|
| delay| Number |节流时间。也就是频率，表示多久触发一次|
| callback| Function |目标函数。也就是我们需要节流的函数|
**Retrun**: 返回一个已经节流的函数.
**Example:**
```html
throttle(delay, callback)测试
throttle(delay, callback)测试
var throttled = throttle(800, function scrollTest(e) {
console.log(e, '正在滚动...')
})
```
#### throttle(delay, noTrailing, callback)
| 参数 | 数据类型 | 参数描述 |
|:-----:|:-------:|:--------|
|delay|Number|节流时间。也就是频率，表示多久触发一次|
|noTrailing|Boolean|表示结束触发后最后是否会触发一次callback调用。false表示始终调用 true表示不调用
|callback|Function|目标函数。也就是我们需要节流的函数|
**Retrun**: 返回一个已经节流的函数.
throttle(delay, false, callback) 和 throttle(delay, callback)效果一样
**Example:**
```html
throttle(delay, true, callback)测试
throttle(delay, true, callback)测试
var throttled = throttle(800, true, function scrollTest(e) {
console.log(e, '正在滚动...')
})
```
### debounce
#### debounce(delay, callback)
| 参数 | 数据类型 | 参数描述 |
|:-----:|:-------:|:--------|
| delay| Number |延迟时间。表示两次事件触发时间间隔如果小于delay, 则重新计时，知道大于delay才触发callback|
| callback| Function |目标函数。也就是我们需要去抖的函数|
**Retrun**: 返回一个已经去抖的函数.
**Example:**
```html
debounce(delay, callback)测试
debounce(delay, callback)测试
var debounced = debounce(800, function scrollTest(e) {
console.log(e, '正在输入...')
})
```
#### debounce(delay, atBegin, callback)
| 参数 | 数据类型 | 参数描述 |
|:-----:|:-------:|:--------|
| delay| Number |延迟时间。表示两次事件触发时间间隔如果小于delay, 则重新计时，知道大于delay才触发callback|
| atBegin| Boolen |表是在开始时候还是结束时候去抖|
| callback| Function |目标函数。也就是我们需要去抖的函数|
**Retrun**: 返回一个已经去抖的函数.
debounce(delay, false, callback) 和 debounce(delay, callback)效果一样，表示结束去抖
**Example:**
```html
debounce(delay, true, callback)测试
debounce(delay, true, callback)测试
var debounced = debounce(800, true, function scrollTest(e) {
console.log(e, '正在输入...')
})
```