函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
js代码
/**
* @desc 函数防抖
* @param fn 函数
* @param delay 延迟执行毫秒数 默认0.5s
*/
export function debounce(fn, delay) {
var delay = delay || ;
var timer;
return function () {
console.log('调用了debounce方法')
let args = arguments;
if(timer){
clearTimeout(timer);
}
timer = setTimeout(() => {
timer = null;
fn.apply(this, args);
}, delay);
}
} /**
* @desc 函数节流
* @param fn 函数
* @param interval 函数执行间隔时间毫秒数 默认1s
*/
export function throttle(fn, interval) {
var last;
var timer;
var interval = interval || ;
return function () {
console.log('调用了throttle方法')
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}
在vue中使用
<template>
<view>
<text @tap="clickDebounce()">防抖</text>
<text @tap="clickThrottle()">节流</text>
</view>
</template> <script>
import { debounce, throttle } from '@/utils/index.js'
export default {
data() {
return {
num: 0
}
},
methods: {
// 防抖
clickDebounce: debounce(function() {
this.num += 1
console.log('第' + this.num +'次点击' )
}, 600),
// 节流
clickThrottle: throttle(function() {
this.num += 1
console.log('第' + this.num +'次点击' )
}, 800)
}
}
</script>
运行结果