1、安装依赖
npm install lodash -S
2、全局引用
//全局导入
import _ from 'lodash'
Vue.prototype._ = _ //全局导入的挂载方式
但是这里我全局引用后,页面使用时总是会报错说_未定义,我又不想关,所以用的是组件中引入
3、调用
1.html
<div @click="search"></div>
2.methods
防抖
//不传值
search: _.debounce(function () {
console.log(this.aa)
}, 5000)
//传值
search: _.debounce(function (index) {
console.log(index)
}, 2000)
节流
search: _.throttle(function (index) {
console.log(index)
}, 2000)
如果只像上面那么写的话,两秒内你点击多次,会触发两次,改成下面这样就可以
search: _.throttle(function (index) {
console.log(index)
}, 2000, { trailing: false })
防抖:debounce:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时 假设设置防抖两秒,点击一次,在两秒内再点击第二次,就会重新计这两秒,(就像王者里面的回城)相当于两秒内的最后一次点击生效
节流:throttle:假设设置节流两秒,在两秒内点击多次,只触发第一次,两秒内点击的其他次数不生效