Vux-笔记

2019-04-01  本文已影响0人  风去来兮_b7fe

【vux中的debouce和throttle】Debounce 和 Throttle 的原理及实现
用法

<div @mousemove="clickdemo" style="width: 400px;height: 400px;background-color: #53fcff;"></div>
<div @mousemove="clickdemo2" style="width: 400px;height: 400px;background-color: #53fcff;"></div>
 
import {debounce} from 'vux'
import {throttle} from 'vux'
 
methods:{
     clickdemo: debounce(function () {
                    console.log("测试")
                },
                3000,//.延迟多少毫秒执行
                {
                    leading: true,
                    //maxWait: 1000,
                    trailing: false,
                }),
            /*
            leading,函数在每个等待时延的开始被调用
            trailing,函数在每个等待时延的结束被调用
            maxwait(debounce才有的配置),最大的等待时间,因为如果 debounce 的函数调用时间不满足条件,可能永远都无法触发,因此增加了这个配置,保证大于一段时间后一定能执行一次函数
            */
            
     clickdemo2: throttle(function () {
                    console.log("测试")
                },
                2000,//实行频率
                {
                    leading: true,
                    trailing: false,
                }),
}
上一篇 下一篇

猜你喜欢

热点阅读