JavaScript - 函数防抖与节流
原创
在工作中，时常会有这种情况：
- 在查询数据请求接口的时候，或在输入搜索文本的时候，频繁的查询操作，需要重复调取接口数据，这时候接口调用太频繁容易奔溃卡住，极大地浪费资源，降低前端性能；
- 做界面滑动监听，每次滚动都需要执行某个函数，但是每次滚动的执行一次太过频繁，占内存浪费资源；
利用防抖与节流可解决此类问题
一、防抖
防抖：在任务频发的情况下，在任务触发的间隔超过设定的间隔的时候，任务才会执行，即被调用的函数在一次连续的高频操作中只被调用一次。
意思就是：这件事需要等待，如果反复催促，就重新计时
上面频繁调用接口的情况，我们在代码中使用防抖功能，就可以在用户输入完成或点击操作的结束后，才去调用接口，整个过程只是最后执行的一次接口调用
封装一个防抖函数
let debounceTimer = null // 防抖方法-定时器对象
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
function debounce (func, wait, immediate = false) {
let context = this // 获取debounce执行作用域的this
let args = arguments // 获取参数
if (debounceTimer) clearTimeout(debounceTimer)
if (immediate) {
const callNow = !debounceTimer
debounceTimer = setTimeout(() => {
debounceTimer = null
}, wait)
if (callNow) func.apply(context, args)
} else {
debounceTimer = setTimeout(function() {
debounceTimer = null
func.apply(context, args)
}, wait)
}
}
二、节流
节流：和防抖一样也是优化高频调用函数的一种方法，通俗来讲节流就是指定时间间隔内只会执行一次任务。
意思就是：去摇号，一天摇号的次数只能一次，下次隔天再来
上面需要监听计算滚动条的情况，使用节流可以按一定的时间频率去获取，用户提交查询接口数据，可以使用节流，在接口预计返回的时间内只允许执行一次接口调用,减少高频调用
封装一个节流函数
let throttlePreious = 0 // 节流记录的时间戳
let throttleTimer = null // 节流定时器对象
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param type 1 表时间戳版（立即执行） 2 表定时器版（延迟执行）
*/
function throttle (func, wait, type = 1) {
let context = this // 获取debounce执行作用域的this
let args = arguments // 获取参数
if (type === 1) {
let now = Date.now()
// 当前时间 - 记录的时间 > 设定的时间间隔
if (now - throttlePreious > wait) {
func.apply(context, args)
throttlePreious = now
}
} else if (type === 2) {
if (!throttleTimer) {
throttleTimer = setTimeout(() => {
throttleTimer = null
func.apply(context, args)
}, wait)
}
}
}三、知识点补充
1、什么是arguments ?
- JavaScript并没有重载函数功能，但是Arguments对象能够模拟重载，是一个传递给函数的参数的类数组对象。
- Javascrip中每个函数都会有一个Arguments对象实例arguments，它包括了函数所要调用的参数
- 通俗讲，arguments就是一个函数下的带有传入参数并且有cellee等方法的一个类数组
2、为什么使用apply ？
方法重用，这里使用apply，是因和call不同，call()方法是分别接收参数apply()方法接受数组形式的参数。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录