函数防抖
<div>
<button @click="click">点我进行函数防抖</button>
</div>
script标签下定义一个函数
function throttle (method) {
clearTimeout(method.timer)
method.timer = setTimeout(function () {
method.call()
}, 1000)
}
methods里面调用它们
click () {
throttle(this.doSomething)
},
doSomething () {
console.log('在这里进行防抖操作')
},
然后连续点击多次,只生效最后一次
函数节流
还是上面的例子
<div>
<button @click="click">点我进行函数防抖</button>
</div>
直接在mothods里面写
bbb () {
this.doSomething()
},
doSomething () {
var _timer = ' '
if (_timer) {
return
}
_timer = setTimeout(function () {
console.log('这里进行节流操作')
clearTimeout(_timer)
_timer = ''
}, 1000)
},
管你点多少下,我一秒只生效一次。
再加一个怎么在js中实现的方式吧。
防抖:
function debounce() {
let timeId = null;
return function() {
if(timeId) {
clearTimeout(timeId);
}
timeId = setTimeout(() => {
console.log('这里操作')
}, 1000)
}
}
window.onresize = debounce()
节流:
function jie() {
let timeId = null;
return function() {
if(timeId) {
return;
}
timeId = setTimeout(() => {
console.log('这里操作')
timeId = null
}, 1000)
}
}
window.onresize = jie()