使用方法
- 在公共方法中(如 utils.js 中),加入函数防抖和节流方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| export const debounce = (f, wait = 500) => { let timer return (...args) => { clearTimeout(timer) timer = setTimeout(() => { f(...args) }, wait) } }
export const throttle = (f, wait = 500) => { let timer return (...args) => { if (timer) { return } timer = setTimeout(() => { f(...args) timer = null }, wait) } }
|
- 在需要使用的组件引用
1 2 3 4
| <input placeholder="搜索你想要的内容" @input="onInput" :value="kw"/>
import { debounce } from "../../common/utils"
|
- 在 methods 中使用
1 2 3 4 5 6 7 8 9 10 11
| ... methods: { onInput({target}){ this.debounceSearch(this, target.value) }, debounceSearch: debounce((that, kw) => { that.kw = kw that.faqIndex("search") }) } ...
|
总结简要
防抖:防止抖动,单位时间内事件触发会被重置,避免事件被误伤触发多次。代码实现重在清零 clearTimeout,使用场景(发送短信、调整浏览器窗口、文本编辑器保存)
节流:控制流量,单位时间内事件只能触发一次,如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null使用场景。(onresize/mousemove/onscroll事件,下拉搜索框)