javascript - 如何每 5 秒循环十次在功能之间切换？

Question

我正在开发一个可以切换元素颜色并同时播放音频文件的功能。每次 5 秒或之间暂停 10 次。

这是我的代码:

const stop = 10;
for(var i = 0; i <= stop; i++){
window.setTimeout(function() {
    $.playSound('design_tools/music/tense.m4a'); // https://github.com/admsev/jquery-play-sound
    $( "#tight" ).toggleClass("river"); // Blue

    window.setTimeout(function() {
        $.playSound('design_tools/music/release.m4a');
        $( "#tight" ).toggleClass("sun"); // Yellow
    }, 5000); 

}, 5000);


}

这段代码是我正在寻找的功能，但颜色变化与音乐不同步，并且它不会单独执行十次。它只是切换颜色并播放一次音频文件。

** 我刚刚注意到 admsev 更改了他的代码，但我仍在使用他的早期版本之一。如果您想测试一下，这里是:

/**
 * @author Alexander Manzyuk <admsev@gmail.com>
 * Copyright (c) 2012 Alexander Manzyuk - released under MIT License
 * https://github.com/admsev/jquery-play-sound
 * Usage: $.playSound('http://example.org/sound.mp3');
**/

(function($){

  $.extend({
    playSound: function(){
      return $("<embed src='"+arguments[0]+"' hidden='true' autostart='true' loop='false' class='playSound'>").appendTo('body');
    }
  });

})(jQuery);

Answer 1

您可以使用 stop 作为递减计数器并检查它是偶数还是奇数。

var stop = 10;

var changeColor = function(){

  if( stop % 2 === 0 ){
    $.playSound('design_tools/music/tense.m4a');
    $( "#tight" ).toggleClass("river");
  }
  else{
    $.playSound('design_tools/music/release.m4a');
    $( "#tight" ).toggleClass("sun");
  }
  stop--;
  if( stop > 0 )
    window.setTimeout( changeColor, 5000 ); 

};

changeColor();