在for循环中仅调用一次事件

anon 发表于 Dev

匿名

一直试图解决这个问题几个小时，但我似乎找不到解决方案。

基本上，我有一个使用HTML5的音频播放器。音频播放时有一个事件侦听器，它每秒触发一次，直到音频结束。

我根据API给出的时间戳在音频时间线上生成标记，看起来像这样。

这里放置了三个标记-如果总持续时间为60秒，则标记应该为5、10、29。

在每个标记之后，我需要从DOM上的API更改图像和段落文本，然后使用jquery做到这一点。

在“ timeupdate”侦听器内部，我有一个for循环，该循环遍历DOM上的每个标记，然后检查音频对象的“ currentTime”是否小于“ timestamp”。

 audioObject.addEventListener('timeupdate', () =>
 {
     for (let i = 0; i < $(options.markers).length; i++)
     {
         // If the current time of the audio is greater than the first timestamp second, continue
         if (options.audioObject.currentTime > options.podcastData[i].timestamp)
         {
             options.coverImage.attr('src', options.podcastData[i].image);
             options.theTitle.text(options.podcastData[i].name)
         }
     }

 }, false)

现在可以使用，但是它每秒更新一次DOM，因此我看到Inspector元素上闪烁，直到播客结束为止。

我需要的是仅在DOM超过标记时才更新DOM，但此刻我似乎找不到解决方法。

保罗·鲁布

我将进行两项更改：

以相反的顺序浏览列表，并在遇到比赛后退出。照原样，您无需设置和重置属性。
显示每个选项后，在其上设置一个“ seen”属性。不要显示两次。

 for (let i = $(options.markers).length - 1; i >= 0; i--)
 {
     if (options.audioObject.currentTime > options.podcastData[i].timestamp)
     {
         if (! options.podcastData[i].seen)
         {
           options.coverImage.attr('src', options.podcastData[i].image);
           options.theTitle.text(options.podcastData[i].name)
           options.podcastData[i].seen = true
         }

         break
     }
 }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。