Question

我正在学习JS，在一些代码中工作，大致同步音频（口语）和文本（口语的转录）。

更具体地说，代码逐字符地改变文本的背景颜色，等同于播放音频的ms。此外，您可以单击文本的任何字符以转到音频中的等效ms。

我正在使用Bart Veneman扳手自动为我的文本上的每个字符添加跨度，然后Jquery使用for循环和这些跨度来动画这些字符的背景颜色。背景颜色.animation每个角色需要+ -240ms才能发生。

由于音频ontimeupdate似乎不太可靠，我使用间隔作为我的计时器：它在音频启动时启动并运行paralel到它。背景颜色.animation在此间隔内发生。

¿问题是什么？：如果你visit the website（在Firefox下工作，而不是Chrome）并点击文本的任何部分（音频开始播放），请点击其他部分文本（音频播放点更改）您会注意到某些文本字符背景颜色仍然存在。这些字符背景颜色未正确清除：

¿我的猜测是什么？：这种情况发生的原因是背景颜色为+ -240ms。动画需要发生VS如何/何时调用clearInterval VS如何/何时清除for循环背景颜色发生。

更多信息：清除背景颜色和间隔的for循环，都在audio.onplay触发的函数内运行。

单击文本字符时，音频暂停，播放点被更改，并且会触发audio.onplay，因此调用该函数。

clearInterval在Interval本身内，并且在audio.onpause或on.ended（以及是否到达文本的最后一个字符）时运行。

我已经读过Intervals循环而没有等待它们中的代码块完成，所以我也尝试使用超时here，结果相同。

¿究竟发生了什么？什么可能是解决这个问题的好方法？

谢谢

完整代码：

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta charset="UTF-8">
<title>masculinidades/masculinities TEST 5</title>
</head>
<body>
<audio id="miAudio" preload="auto" controls><source src=audio/talk.mp3 type="audio/mpeg"></audio>

<p id="text">La lógica del empresario criminal, el pensamiento de los
boss coincide con el neoliberalismo más radical. Estar en
situación de decidir sobre la vida y la muerte de todos</p>

<script src="js/spanner.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>

<script>
 $(document).ready(function(){

      // spanner aplica span .char* en orden creciente al contenido del elemento #text
      spanner( document.getElementById("text") );

      // guardar el elemento audio y el tamaño del texto en  variables
      var elAudio = document.getElementById("miAudio");
      var durText = $("#text").text().length;

      // calcular cada cuantos ms hemos de de avanzar un caracter
      var msXchar = Math.floor((elAudio.duration*1000) / durText);
      console.log("1 Char cada " + msXchar + " ms");


      // al hacer hover en cualquier elemento con clase char(int) colorea y pon cursor
      $("[class^='char']").hover(
         function() {
            $(this).css('cursor', 'e-resize');
            if ($(this).css("backgroundColor") != "rgb(0, 250, 154)") {
               $(this).css("backgroundColor", "rgb(0, 250, 154)");
            } else {
               $(this).css("backgroundColor", "rgb(255, 255, 255)");
            };

         }, function() {
            if ($(this).css("backgroundColor") == "rgb(0, 250, 154)") {
               $(this).css("backgroundColor", "rgb(255, 255, 255)");
            } else {
               $(this).css("backgroundColor", "rgb(0, 250, 154)");
            };  
         }
      );

      /* al hacer click en cualquier elemento con clase char(int) usa (int) para ir al tiempo del audio equivalente */
      $("[class^='char']").click(
         function() {
            elAudio.pause();
            console.log("clicked paused")

            //extrae el int y escala a tiempo de audio
            var thisChar = $(this).attr('class').substring(4);
            var thisTime = ((thisChar / durText) * (elAudio.duration));

            //muévete a ese tiempo de audio
            elAudio.currentTime = thisTime + (msXchar*2/1000)
            console.log(thisChar, thisTime);
            elAudio.play();
         }
      );


      // cuando se hace play al audio ...
      elAudio.onplay = function() {

            console.log("onplay");

            // + borra todo caracter coloreado
            for (var i = 0; i < (durText+1); i++) {
               $(".char" + i).css("backgroundColor", "#ffffff")
            };

            // en qué MILIsegundo del audio estamos y a q equivale en texto?
            var actualTime = Math.floor(elAudio.currentTime*1000);
            var actualChar = Math.floor(((actualTime/1000) / elAudio.duration) * (durText));
            console.log("start " + "ms: " + actualTime , "char: " + actualChar);


             // ... inicia un Interval que avanza paralelamente al audio
            var elInterval = setInterval(function(){

               // colorea el actual char
               console.log("start colorea")
               $( ".char" + actualChar).animate({ 
                  backgroundColor: '#00fa9a'
               }, (msXchar*4) );
               console.log("end colorea")

               // cada loop subir 1 el contador de caracteres, empezando en actualChar           
               actualChar += 1; 
               console.log("char actual " + actualChar);

               // y subir en msXchar ms el contador de tiempo
               actualTime += msXchar;

               // si el num de char actual es mayor que el largo total del texto, detenemos el intervalo, lo mismo si se ha pausado o terminado el audio
               if (actualChar > (durText)) {clearInterval(elInterval);
               console.log("interval cleared actualChar > durText");};
               elAudio.onpause = function(){clearInterval(elInterval);
               console.log("interval cleared paused");};
               elAudio.onended = function(){clearInterval(elInterval);
               console.log("interval cleared ended");};

            // repite este intervalcada msXchar ms
          }, msXchar); 

      };
   }); 
</script>
</body>
</html>

Answer 1

请注意，animate方法将工作为异步。不同步。
（每jQuery.fn.animate创建一个动画制作计时器。）

因此，您不仅需要清除计时器，还需要清除动画队列。

参见参考文献

.animate(...)：https://api.jquery.com/animate/

.stop(...)）：https://api.jquery.com/stop/

.finish(...)：https://api.jquery.com/finish/

演示

http://codepen.io/mooyoul/pen/NxRJOr

Interval（或timeOut）中的jquery .animate在清除

1 个答案:

参见参考文献

演示