概念:在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发。
类似于技能CD。
应用:点击按钮,轮播图点击左右箭头。
插件lodash.js,它里面封装了函数的防抖与节流业务。
<p>计数器:<span>0</span></p>
<button>+1</button>
// 获取元素
let span = document.querySelector('span')
let btn = document.querySelector('button')
let count = 0
let timer = null
// 控制节流阀是否开启或关闭
let flag = true
// 需求:在一秒以内,不管点击按钮多少次,计数器数值只能+1
btn.onclick = function () {
if (flag) {
flag = false
timer = setTimeout(() => {
count++
span.innerhtml = count
flag = true
}, 1000)
}
}
概念:前面的所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发,只会执行一次。
类似于LOL回城被打断。
应用:输入框搜索。
插件lodash.js,它里面封装了函数的防抖与节流业务。
<input type="text" @input="inputFn" />
data () {
return {
timer: null
}
},
methods: {
inputFn () {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
// 发送网络请求
}, 3000)
}
}
在一个input搜索框中输入文本,如果2s内可能会有很多次input的onChange事件,每次都触发一个API请求,明显不合理,所以此时需要debounce节流函数,2s之内的所有输入只会请求一次API
窗口的resize、scroll、输入框内容校验等操作时,如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时,在这种情况下如果事件触发的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕
在限制的时间内持续触发事件的时候,函数是完全不执行的,非立即执行版,等最后一次触发结束的一段时间之后,再去执行,节流的意思是让函数有节制地执行
一种是立即执行:频繁触发事件,第一次触发时执行函数,后面触发不会执行,停止触发,间隔一定时间之后再触发事件,函数才会再次执行
函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处。先从使用场景做个区分。
节流:在一定时间内连续触发某事件,在这段时间段内只执行首次触发的那一次。1s内执行第一次,防抖:在一定时间内连续触发某事件,在这段时间内只执行最后一次触发的那一次。最后一次延时1s后执行
节流是指避免过于频繁地执行某个功能,例如保存按钮。 为了避免重复提交或者服务器的考虑,往往需要限制点击行为,否则接口会被频繁请求。 之前基本都是通过js控制节流问题
今天给大家带来的是Vue 2 中的实现 CustomRef 方式防抖/节流这篇文章,前几天利用 customRef 实现了在 vue 3 中的极致防抖/节流的新方式。在前端的开发过程中,在涉及到与用户交互的过程中是基本上都是需要处理的
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!