隐菌子 2022-03-31 14:23 采纳率: 58.3%
浏览 105
已结题

vue中封装防抖不改变this指向

我在vue中封装了一个防抖,使用时直接传递需要调用的方法过去,防抖功能可以实现,但我在网上看到别人写的防抖发现他们都在函数中使用了apply来调用,并且改变了this指向,让我很不解


//节流
export function throttle(callback, wait = 50) {
    let timer = null
    let flag = true
    return function () {
        if (flag) {
            timer = setTimeout(() => {
                callback()
                flag = true
                clearTimeout(timer)
                timer = null
            }, wait)
        }
        flag = false
    }
}

在使用的地方

    methods: {
      resize() {   //这个resize是我自己写的方法
        this.$refs.alarmNumberBox.initWH();
        this.$refs.alarmTrendBox.initWH();
        this.$refs.currentQuantityBox.initWH();
        this.$refs.alarmNumber.screenAdapter();
        this.$refs.alarmTrend.screenAdapter();
        this.$refs.alarmToday.screenAdapter();
      }
    },

绑定防抖处

 activated() {
      //保存函数
      const resize = throttle(this.resize, 50);
      //挂载
      window.addEventListener("resize", resize);
    },

我这种写法经测试不需要apply来改变this,可以实现功能,但总感觉哪里不太好,各位有空的话,请帮我看看

  • 写回答

1条回答 默认 最新

  • 凉瓜拌面 2022-03-31 17:33
    关注
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            function throttle(callback, wait = 50) {
                let timer = null
                let flag = true
                return function () {
                    const _this = this
                    if (flag) {
                        timer = setTimeout(() => {
                            // callback()
                            callback.apply(_this)
                            flag = true
                            clearTimeout(timer)
                            timer = null
                        }, wait)
                    }
                    flag = false
                }
            }
            const person = {
                name:"小明",
                say:function(){
                    console.log(this.name + '说话了')
                }
            }
            window.name = '小红'
            person.say()
            const test = throttle(person.say, 50);
            window.addEventListener("resize", test.bind(person));
    
            
        </script>
    </body>
    
    </html>
    

    在Vue中methods的 this 自动绑定为 Vue 实例,内部可能做了什么处理,这个不太清楚
    因为return function () {}属于匿名函数,加上apply可以根据使用者需要修改this指向,为了代码的健全性,并不推荐去除

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 4月10日
  • 已采纳回答 4月2日
  • 创建了问题 3月31日

悬赏问题

  • ¥20 qt中connect两个signal
  • ¥20 pix2pixHD运行测试命令时出现数据类型错误无法反向传播的问题
  • ¥15 python处理Excel符合条件的行自动填写数据分类
  • ¥15 汇编hook举例并讲解(通俗易懂,学习用)
  • ¥20 用c++语言模拟键盘电子琴设计
  • ¥15 STM32cubemx生成keil工程,有问题与正常的情况不同,求解!
  • ¥15 如何自动点击银行app的安全键盘,实现密码自动输入
  • ¥15 关于四边形重叠的问题
  • ¥15 用verilog语言设计一个简易的八音符电子琴,可通过按键输入来控制音响。演奏时可以选择是手演奏(由键盘输入)或自动演奏已存入的乐曲。能够自动演奏多首乐曲,且每首乐曲可重复演奏
  • ¥15 sap gui脚本每次到导出Excel的时候就停住不动。不会另存为。