属性值更改后是不是起作用？

Posted 2023-02-25

【中文标题】属性值更改后是不是起作用？

【英文标题】：Do function after a property value changes?属性值更改后是否起作用？

【发布时间】：2015-09-09 03:43:05

【问题描述】：

我有一个 html5 音频标签，我想在每次音频的“currentTime”属性发生变化时执行一个函数。

我可以通过

获得

currentTime

$('#myAudio').prop('currentTime');

但我不知道如何处理这种事件。我尝试了许多插件来观察这种变化，但我无法让它发挥作用。请帮忙。

【问题讨论】：

猜你需要 setInterval 函数来检查每一秒的变化，并在变化时做一些事情

我已经考虑过了，但是我需要在更改发生时执行该函数，而不是等待 1 秒以便更新

参考这个。 ***.com/questions/4993097/…这可能对你有帮助。

@PabloLebanRuiz ，这两个是不同的东西。

【参考方案1】：

也许原生timeupdate 事件就是您要寻找的（参见the docs on MDN）：

document.addEventListener('timeupdate', function(e) 
  var audioElement = e.target;

  // do something
);

根据文档：

timeupdate 事件在 currentTime 属性指示的时间更新时触发。

编辑

正如 cmets 中所指出的，将事件附加到文档将侦听源自页面上所有音频元素的所有 timeupdate 事件。但是，这超出了问题的范围，因此事件处理程序内部的业务逻辑取决于其具体实现。

附加到文档的一个好处是您可以自动支持动态生成的音频元素，而无需重新附加过时的事件侦听器。但是，当检查哪个目标（由e.target 提供）触发了事件以及您想对该元素做什么或不做什么时，它可能会打开一堆蠕虫。

【讨论】：

哇，不，我没有赞成，你为什么要把它附在文件上？直接将它附加到 audioElement 上！或至少将var audioElement = e.target; 更改为if(audioElement === e.target)

@Kaiido，它可以去任何一种方式。无论如何，该事件都会冒泡，除非您手动停止传播。您可以将其附加到元素本身或文档。附加文档的好处是您可以（免费）将音频元素动态填充到 DOM 中，而无需重新附加任何过时的事件处理程序。

是的，但是您的处理程序将触发任何 MediaElement 的 timeupdate 事件。当然不是你想要的。

@Kaiido，它可能是也可能不是人们想要的。答案是通用的，只是提供了一个使用事件的模板。事件处理程序内部的控制业务逻辑由 OP 来实现。此外，e.target 将引用事件起源的元素。称它为audioElement 只是一个包装器，但不是必需的。

是的！有用！！ document.getElementById("myAudio").ontimeupdate = function() myFunction();成功了！谢谢！