|
|
使用场景： 首次调用执行一次，一定时间内再次调用，不再执行。
实现方式：
1. debounce （函数去抖） 多次触发，只在最后一次触发时，执行目标函数。
_.debounce(func, [wait=0], [options={}])
2. throttle （函数节流）限制目标函数调用的频率，比如：1s内不能调用2次。
_.throttle(func, [wait=0], [options={}])
lodash在opitons参数中定义了一些选项，具体用法去看下lodash;
案例场景： 一个控制摄像头的方向的控制盘，因为数据返回的速度真的有点感人，点击后大概十秒摄像头才会返回操作后的画面。
容易让人重复点击，所以用节流去实现比较合适，使用写法如下：<div class='controller'>
<ul class='pie'>
<li class='slice-one slice' @click="onClick(1)"><a><img src="../img/icon2.png" alt=""></a></li>
<li class='slice-two slice' @click="onClick(6)"><a><img src="../img/icon2.png" alt=""></a></li>
<li class='slice-three slice' @click="onClick(4)"><a><img src="../img/icon2.png" alt=""></a></li>
<li class='slice-four slice' @click="onClick(8)"><a><img src="../img/icon2.png" alt=""></a></li>
<li class='slice-five slice' @click="onClick(2)"><a><img src="../img/icon2.png" alt=""></a></li>
<li class='slice-six slice' @click="onClick(7)"><a><img src="../img/icon2.png" alt=""></a></li>
<li class='slice-seven slice' @click="onClick(3)"><a><img src="../img/icon2.png" alt=""></a></li>
<li class='slice-eight slice' @click="onClick(5)"><a><img src="../img/icon2.png" alt=""></a></li>
<div class="center"></div>
</ul>
</div>
export default {
name: '',
data() {
return {
controlTime: globalConstant.controlTime, // 控制时长
throttle: null
};
},
props: {
videoPlatformCofig: {
type: Object,
default: function() {
return {
}
}
}
},
components: {},
computed: {},
created() {
},
methods: {
// 点击
onClick(index) {
this.throttle(index)
}
},
mounted() {
this.throttle = _.throttle(function(direction) {
const vo = {
direction: direction,
controlTime: this.controlTime,
code: this.videoPlatformCofig.code,
channelNo: this.videoPlatformCofig.channelNo
}
videoControl.direction(vo).then(response => {
this.$Message.success('操作成功，请耐心等待')
})
}, 10000)
}
} |
程序猿的技术大观园：www.javathinker.net
|
|
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → vue 项目中使用loadsh 的 防抖（debounce）和节流（throttle）
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密
