JavaScript 中的函数大多数情况下都是由用户主动调用触发的,比如说点击、拖拽、改变浏览器尺寸、提交表单等。除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题。
但是在一些少数情况下,函数的触发不是由用户直接控制的。在这些场景下,函数有可能被非常频繁地调用,而造成性能问题:
新建 anti-shaking.js
// 函数防抖
// 防抖:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。
export function debounce (fn, delay) {
// eslint-disable-next-line no-redeclare
var delay = delay || 200
var timer
return function () {
var th = this
var args = arguments
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(function () {
timer = null
fn.apply(th, args)
}, delay)
}
}
// 节流:触发函数事件后,短时间间隔内无法连续调用,只有上一次函数执行后,过了规定的时间间隔,才能进行下一次的函数调用。
export function throttle (fn, interval) {
var last
var timer
// eslint-disable-next-line no-redeclare
var interval = interval || 200
return function () {
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)
}
}
}
//引入
import {throttle} from '../utils/anti-shaking'
data () {
return {
update: null
}
},
created () {
// 节流
this.update = throttle(this.exec, 1500)
},
methods: {
exec () {
// 业务 逻辑处理函数
}
}