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 () {
      // 业务 逻辑处理函数
    }
  }
最后修改:2023 年 03 月 20 日
如果觉得我的文章对你有用,请随意赞赏