【原生 JS】函数防抖与函数节流
函数防抖:函数在特定的时间内不被再调用后执行函数节流:确保函数特定的时间内至多执行一次相同点:都是为了限制函数的执行频次防抖典型场景:文本框输入搜索(连续输入时避免多次请求接口)节流典型场景:防止按钮重复点击防抖vue中使用:1.在utils.js文件写防抖方法export const debounce = (fn, delay) => {// 记录上一次的延时器let timer = nu
函数防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
函数节流:每隔一段时间,只执行一次函数。
相同点:
1.目的都是,都是为了限制函数的执行频次,节省计算资源。
2.都是通过使用 setTimeout 实现。
不同点:
1.函数防抖关注一定时间连续触发的事件只在最后执行一次,而函数节流侧重于一段时间内只执行一次。
防抖典型场景:文本框输入搜索(连续输入时避免多次请求接口)
节流典型场景:防止按钮重复点击,表单重复提交。
防抖vue中使用:
1.在utils.js文件写防抖方法
export const debounce = (fn, delay) => {
// 记录上一次的延时器
let timer = null
delay = delay || 200
return function () {
const args = arguments
const that = this
// 清除上一次延时器
clearTimeout(timer)
timer = setTimeout(function () {
fn.apply(that, args)
}, delay)
}
}
2.在vue组件中引入
import { fmoney, debounce } from '@/config/utils.js'
3.在组件中使用
<div class="wrap" @mousedown="handleClick">
handleClick: debounce(function (e) {
this.handleClick_(e)
}, 50)
个人理解:
防抖:用户做了一个操作,不马上执行相应的函数,等待一段时间,如果用户在这段时间都没有相同操作,就执行相应的函数。
节流:技能CD。用户做了一个操作,执行相应的函数,并且把一个变量标记为false,一段时间后,再标记为true,只有变为true时,再操作才有效。
参考文章:
1、https://www.jianshu.com/p/b7b698db8352
2、https://www.cnblogs.com/fozero/p/11107606.html
3、https://juejin.im/entry/6844903466427482120
更多推荐
所有评论(0)