vue使用lodash防抖和节流

原创已于 2022-09-04 00:48:02 修改 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-09-03 23:53:11 首次发布

本文介绍了JavaScript中节流（throttle）和防抖（debounce）两种常用的技术，用于解决短时间内频繁触发事件导致的性能问题，通过实例演示了如何使用lodash库实现，并探讨了它们的区别和应用场景。

节流和防抖都是为了解决短时间触发事件造成的性能问题

防抖：debounce：假设设置防抖两秒，你点击一次，在两秒内再点击第二次，就会重新计这两秒，（就像王者里面的回城）

节流：debounce：假设设置防抖两秒，你点击一次，在两秒内再点击第二次，就会重新计这两秒，（就像王者里面的回城）

1最简单方法

1.1下载

 npm i lodash -S

1.2.单组件使用

import _ from 'lodash'

1.3.点击事件调用（防抖）

        <ul>
            <li v-for="(item, index) in 2" :key="index" @click="click2(index)">{{ item }}</li>
        </ul>

不传值        
        click2: _.debounce(function () {
            console.log(this.price)
        }, 5000)

传值
        click2: _.debounce(function (index) {
            console.log(index)
        }, 2000)

1.4节流

        click2: _.throttle(function (index) {
            console.log(index)
        }, 2000)

如果只像上面那么写的话，两秒内你点击多次，会触发两次
改成这样就可以

        click3: _.throttle(function (index) {
            console.log(index)
        }, 2000, { trailing: false })