防抖(debounce):
当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。
js实现:
/**
* 函数防抖
*/
function debounce(fn, delay) {
// 记录上一次的延时器
var timer = null;
var delay = delay || 200;
return function() {
var args = arguments;
var that = this;
// 清除上一次延时器
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(that,args)
}, delay);
}
}
节流(throttle):
当持续触发事件时,有规律的每隔一个时间间隔执行一次事件处理函数。
/**
* 函数节流
*/
function throttle(fn,delay){
var lastTime;
var timer;
var delay = delay || 200;
return function() {
var args = arguments;
// 记录当前函数触发的时间
var nowTime = Date.now();
if (lastTime && nowTime - lastTime < delay) {
clearTimeout(timer);
timer = setTimeout(function () {
// 记录上一次函数触发的时间
lastTime = nowTime;
// 修正this指向问题
fn.apply(this, args);
}, delay);
}else{
lastTime = nowTime;
fn.apply(this, args);
}
}
}
注意:setTimeout内 this失效,所以用apply重指向
对比理解:
防抖和节流都可以用于 mousemove、scroll、resize、input等事件,他们的区别在于防抖只会在连续的事件周期结束时执行一次,而节流会在事件周期内按间隔时间有规律的执行多次。
Vue防抖节流,引入lodash
import _ from 'lodash'
export default {
name: 'demo',
methods: {
getName() {
console.log('my name is ctj')
return
}
},
mounted() {
this.debounceGetName = _.debounce(this.changeStr, 500)
}
}