Vue2的节流函数

文章目录

1. Vue2的节流函数

Vue2的节流函数

在 Vue2 的 methods，中，想定义一个高阶函数返回的方法时，this 的指向需要注意一下。

// util.js
export function throttle(fn, wait, _this) {
    let timer
    // console.log(_this) // undefined
    // console.log(this) // undefined
    return function (...args) {
        if (!timer) {
            // console.log(this) // Vue Components
            timer = setTimeout(() => {
                fn.apply(this, args)
            }, wait)
        }
    }
}

// .vue 文件
import { throttle } from '@/utils/util'
export default {
    methods: {
        mouseMove: throttle(function () {
            console.log(this) //  Vue Components
        }, 300, this)
    }
}

在上面使用的过程中，在高阶函数返回的函数外部，得到的 this 是空，但同时传进去的 _this 也是空，只是因为，在页面初始化的时候，这个 mouseMove 函数已经执行了 throttle()，但是此时， Vue Components 还未被实例化，无法得到 this，因此是 undefined（小程序中，网页可能得到全局变量）。而在返回得函数中能拿到 this，是因为返回的函数是注册在 methods 中的，Vue 把 this 绑定给这个 function 了，因此这个返回的函数能拿到 this，进而 apply，也因此 methods 中真正调用的函数可以打印出 this.