美文网首页
addEventListener 内 this 指向问题

addEventListener 内 this 指向问题

作者: 微笑的大步向前走 | 来源:发表于2019-12-25 14:45 被阅读0次

相关问题前提:
最近在做一个 已知 audio 的 url 获取 其 时长,并且push 进去数组的问题

上代码:

            if (fileType === 'audio') {
              let audioDom = new Audio(url)
              let _this = this
              audioDom.addEventListener('loadedmetadata', function (_event) {
                embeddedData.audio = {
                  id: fileUrl,
                  Extension: fileType.toUpperCase(),
                  fileExtension: fileType.toUpperCase(),
                  // 获取音频的长度
                  duration: Math.round(audioDom.duration)
                }
                fileInfo.audioTime = Math.round(audioDom.duration)
                _this.embeddedFiles.push(embeddedData)
                _this.$emit('uploadSuccess', fileInfo)
              })
            } else {
              fileType === 'image' ? this.embeddedImages.push(embeddedData) : this.embeddedFiles.push(embeddedData)
              this.$emit('uploadSuccess', fileInfo)
            }

记录一下:
1、首先要常见一个 audio dom
2、然后 用 addEventListener('loadedmetadata', function(){}),这个事件是说 等 这个audio 都加载完成了以后 ,就可以获取到 audio的 相关 参数,比如说 duration值
3、这一点需要注意:在 这个事件里面,数据是拿不出来的,所以 ,我就用 原本的一个全局的 数据push 进去了,但是用的是 this.embeddedFiles.push(embeddedData),但是 报错表示 this.embeddedFiles 不存在,是由于作用域的问题,所以要 先 let _this = this,再用 _this.embeddedFiles.push(embeddedData) 就可以了

ok ,仅此记录

相关文章

  • addEventListener 内 this 指向问题

    相关问题前提:最近在做一个 已知 audio 的 url 获取 其 时长,并且push 进去数组的问题 上代码...

  • addEventListener 中 事件用bind指向this

    addEventListener 中 事件用bind指向this 后,无法移除事件问题 今天写BUG的时候,要在一...

  • JS中函数内的this指向问题

    函数中的this指向通常是根据谁调用了该函数决定的 01、普通函数 普通函数中的this指向window。 02、...

  • 构造函数中用addEventListener添加事件函数怎么改变

    在构造函数中的方法中this指向的是实例化对象,但是当我们在使用elem.addEventListener("ev...

  • [译] addEventListener vs onclick

    翻译自Stackoverflow:addEventListener vs onclick 问题: addEvent...

  • this指向问题

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上...

  • this指向问题

    简单一句话来说,this的指向不是在创建时候决定的,而是调用的时候,谁调用就指向谁。 在严格模式下,未指定坏境,而...

  • this指向问题

    三种解决方案 第一种,bind(this)来改变匿名函数的this指向 第二种,var _this= this 第...

  • this指向问题

    一、一般情况 所以用定时器时,一般提前将this保存,便于在定时器内部使用 二、改变this指向 call、 a...

  • this指向问题

    要彻底理解JS中的this指向问题,建议多结合一些相关的面试题,理解记忆,不必硬背 关于this问题:只需记住谁调...

网友评论

      本文标题:addEventListener 内 this 指向问题

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