最近公司项目在做微信小程序我是用mpvue开发的微信小程序,因为时间太紧急,所以关于节流方面的没有过多考虑,所以最近写了一个关于节流的demo,废话不多说,上代码
节流大家应该都知道,前端面试基本上都有可能被问到这个,网上的方案也是满天飞,所以这块的话,我们前端处理一下,后端在来一下,基本上没问题了,
代码如下(由于我写的是原生的JavaScript,其实稍加改动以后就能在你的Vue项目上用上了)
html部分
<button id="touch"> 你点啊 </button>
js部分
运行效果的话,上传截图看不出来什么区别,有心的话就直接copy代码在编译器上运行试试吧
这里的话其实我翻了一个错误,大家注意注意这里的千万不能用箭头函数,这样会导致获取不到this的值
还有就是下面的代码部分需要加上,this的指向以及arguments,方便传参
var touch = document.getElementById('touch'); // 获取重置按钮
let throttle = (fn, gapTime) =>{
if (gapTime == null || gapTime == undefined) {
gapTime = 1500
}
let _lastTime = null
return function() {
let _nowTime = +new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
fn.apply(this,arguments)
// fn() 注意这里不能直接fn()
_lastTime = _nowTime
}
}
}
touch.addEventListener('click', throttle(()=>{
console.log(11111)
}, 1000));
// touch.addEventListener('click', () => {
// console.log(11111)
// })
为了方便大家 我直接把Vue项目中的代码贴上来,方便大家知道在项目中如何使用
1、js文件中封装
2、页面引入
3.使用
网友评论