Skip to content

Latest commit

 

History

History
165 lines (141 loc) · 5.16 KB

README.md

File metadata and controls

165 lines (141 loc) · 5.16 KB
Raw

throttle-debounce@singcl

throttle-debounce

Travis Coveralls github Github file size

Throttle/debounce your functions.

基本用法

  • 使用方法一：UMD方式。lib 目录下是用webpack4.x打包的UMD模块，参照UMD模块的使用方法。
  • 使用方法二：作为项目的依赖配合打包工具使用。
npm i @singcl/throttle-debounce --save
// 基本用法示例
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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>throttle(delay, callback)测试</title>
</head>
<body onscroll="throttled(event)">
    <div style="height: 10000px;">throttle(delay, callback)测试</div>
</body>
<script src="./lib/bundle.min.js"></script>
<script>
    var throttled = throttle(800, function scrollTest(e) {
        console.log(e, '正在滚动...')
    })
</script>
</html>

throttle(delay, noTrailing, callback)

参数 数据类型 参数描述
delay Number 节流时间。也就是频率，表示多久触发一次
noTrailing Boolean 表示结束触发后最后是否会触发一次callback调用。false表示始终调用 true表示不调用
callback Function 目标函数。也就是我们需要节流的函数

Retrun: 返回一个已经节流的函数.

throttle(delay, false, callback) 和 throttle(delay, callback)效果一样

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>throttle(delay, true, callback)测试</title>
</head>
<body onscroll="throttled(event)">
    <div style="height: 10000px;">throttle(delay, true, callback)测试</div>
</body>
<script src="./lib/bundle.min.js"></script>
<script>
    var throttled = throttle(800, true, function scrollTest(e) {
        console.log(e, '正在滚动...')
    })
</script>
</html>

debounce

debounce(delay, callback)

参数 数据类型 参数描述
delay Number 延迟时间。表示两次事件触发时间间隔如果小于delay, 则重新计时，知道大于delay才触发callback
callback Function 目标函数。也就是我们需要去抖的函数

Retrun: 返回一个已经去抖的函数.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>debounce(delay, callback)测试</title>
</head>
<body>
    <h3>debounce(delay, callback)测试</h3>
    <input type="text" oninput="debounced(event)">
</body>
<script src="./lib/bundle.min.js"></script>
<script>
    var debounced = debounce(800, function scrollTest(e) {
        console.log(e, '正在输入...')
    })
</script>
</html>

debounce(delay, atBegin, callback)

参数 数据类型 参数描述
delay Number 延迟时间。表示两次事件触发时间间隔如果小于delay, 则重新计时，知道大于delay才触发callback
atBegin Boolen 表是在开始时候还是结束时候去抖
callback Function 目标函数。也就是我们需要去抖的函数

Retrun: 返回一个已经去抖的函数.

debounce(delay, false, callback) 和 debounce(delay, callback)效果一样，表示结束去抖

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>debounce(delay, true, callback)测试</title>
</head>
<body>
    <h3>debounce(delay, true, callback)测试</h3>
    <input type="text" oninput="debounced(event)">
</body>
<script src="./lib/bundle.min.js"></script>
<script>
    var debounced = debounce(800, true, function scrollTest(e) {
        console.log(e, '正在输入...')
    })
</script>
</html>