美文网首页
js函数节流、防抖

js函数节流、防抖

作者: pinbolei | 来源:发表于2021-04-13 14:17 被阅读0次

    js 函数节流、防抖

    新建index.js将下面代码复制到index.js中

    /**
     * 函数防抖 (只执行最后一次点击)
     * @param fn
     * @param delay
     * @returns {Function}
     * @constructor
     */
    const debounce = (fn, t) => {
      let delay = t || 300
      let timer
      return function () {
        let args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(this, args) // this 指向vue
        }, delay)
      }
    }
    /**
     * 函数节流
     * @param fn
     * @param interval
     * @returns {Function}
     * @constructor
     */
    const Throttle = (fn, t) => {
      let last
      let timer
      let interval = t || 500
      return function () {
        let args = arguments
        let now = +new Date()
        if (last && now - last < interval) {
          clearTimeout(timer)
          timer = setTimeout(() => {
            last = now
            fn.apply(this, args)
          }, interval)
        } else {
          last = now
          fn.apply(this, args)
        }
      }
    }
    export default {
      debounce,
      Throttle
    }
    
    

    相关文章

      网友评论

          本文标题:js函数节流、防抖

          本文链接:https://www.haomeiwen.com/subject/luxclltx.html