Javascript代码在没有警报之前无效，否则它完美无缺

Question

在问一个问题之前，我试着真正地看一下这个问题，但看起来我在这里遇到了一个问题，并且想知道是否有人知道这个问题有明确的答案。 我看过一两个类似的问题，但他们似乎没有指出我的问题，或者至少我不明白他们的目的是什么。

我正在开发一个RPG系统音频PHP函数，它在调用时播放音乐，如果用户没有静音音乐选项则使用音频标签。 （在函数$ song中是第一个参数中的歌曲。）现在，如果调用此函数使其恢复为真，那么它将使用一些javascript。 请原谅代码，因为它有点乱（对我来说），但这里是包含javascript代码的以下代码：

function playmusic($song, $resume=false, $loop=true)
 {
  global $baseurl, $loggeduser;

 if ($resume == true)
  {
   $buttons = "
    <button onclick=\"resetplaytime()\" type=\"button\">Reset</button>
    <button onclick=\"alertplaytime()\" type=\"button\">Alert Time</button>";
   $resume = "
    <script type=\"text/javascript\">
      var curmusic_$song = document.getElementById(\"music_$song\");
      var musictime = getcookie(\"musicplaytime_$song\");

     if (musictime != null && musictime != \"\")
      {
       alert(musictime);
       curmusic_$song.currentTime = musictime; 
      }

      window.onload=settimecookie();

     function getcookie(c_name)
      {
       var i,x,y,ARRcookies=document.cookie.split(\";\");
      for (i=0;i<ARRcookies.length;i++)
       {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf(\"=\"));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf(\"=\")+1);
        x=x.replace(/^\s+|\s+$/g,\"\");
       if (x==c_name)
        {
         return unescape(y);
        }
       }
      }

     function settimecookie()
      {
       var playtime = curmusic_$song.currentTime;
      if (playtime != null && playtime != \"\")
       {
        document.cookie = 'musicplaytime_$song=' + playtime;
       }

       setTimeout(\"settimecookie()\", 50);
      }

     function alertplaytime()
      {
       alert(musictime);
      }

     function resetplaytime()
      {
       curmusic_$song.currentTime=0;
      }

    </script>";
  }

 if ($loop == true)
  {
   $songloop = " loop=\"true\"";
  }

 if ($loggeduser['mutemusic'] == 0)
  {
   return "
    </table>
    $buttons
    <audio id=\"music_$song\" autoplay=\"true\"$songloop preload=\"true\">
      <source src=\"$baseurl/boardfiles/effects/$song.ogg\" type=\"audio/ogg\" />
      <source src=\"$baseurl/boardfiles/effects/$song.mp3\" type=\"audio/mp3\" />
    </audio>
    $resume
    <table class=\"brdr\" cellpadding=\"0\">";
  }
 }

现在，如果我从循环中取出警报，将音频标签的播放时间设置为cookie值，则整个脚本不起作用（如同没有做的那样），除非您使用按钮直接调用其中一个函数然后功能有效。

我已经尝试了一些东西，从使它成为一个函数并直接调用它（它似乎只适用于onclick事件，但如果你希望它在onload或某些自动事件时运行，那么它会失败。），稍后将其移动到函数（以及settimecookie（）的onload，因为它必须在此之后，因为它将cookie设置为当前的播放时间），现在我没有想法。

我希望得到一个答案，因为我相信这段代码可以帮助那些一直试图获得某种恢复音频功能的人，这种功能并不笨重或者使用起来很混乱。 :)我一直试图找到一个解决方案很长一段时间，从来没有这么接近。 谢谢你的阅读。 如果您想要整个PHP函数，那么我也会展示它，但除了两个调试按钮（重置和警报cookie）和带有id“music_ $ song”的音频标签之外，真的没有什么可看的。

编辑：为了清楚，在代码中，双引号之前有转义因为在PHP函数中返回了javascript。

编辑2：现在已经加入了这个编辑，因为有些人已经错过了。 另外我添加了PHP部分。

最后一次编辑：我现在似乎想出了一些让我更接近我希望实现的东西。 我将上面的代码更改为以下代码，它对我来说完美无瑕。

function playmusic($song, $resume=false, $loop=true)
 {
  global $baseurl, $loggeduser;

 if ($resume == true)
  {
   $resume = "
    <!--
    <button onclick=\"resetplaytime();\" type=\"button\">Reset</button>
    <button onclick=\"alertplaytime();\" type=\"button\">Alert Time</button>
    <button onclick=\"settimecookie();\" type=\"button\">Start Cookie tracking</button>
    -->

    <script type=\"text/javascript\">
     function getcookie(c_name)
      {
       var i,x,y,ARRcookies=document.cookie.split(\";\");
      for (i=0;i<ARRcookies.length;i++)
       {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf(\"=\"));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf(\"=\")+1);
        x=x.replace(/^\s+|\s+$/g,\"\");
       if (x==c_name)
        {
         return unescape(y);
        }
       }
      }

     function settimecookie()
      {
       var curmusic_$song = document.getElementById(\"music_$song\");
       var playtime = curmusic_$song.currentTime;
      if (playtime != null && playtime != \"\")
       {
        document.cookie = \"musicplaytime_$song=\" + playtime;
       }

       setTimeout(\"settimecookie()\", 50);
      }

     function resumeplaytime()
      {
       var curmusic_$song = document.getElementById(\"music_$song\");
       var musictime = getcookie(\"musicplaytime_$song\");
      if (musictime != null && musictime != \"\")
       {
        curmusic_$song.currentTime = musictime; 
       }
       curmusic_$song.play(); 

       settimecookie();
      }

      window.onload=resumeplaytime;

     function alertplaytime()
      {
       var musictime = getcookie(\"musicplaytime_$song\");
       alert(musictime);
      }

     function resetplaytime()
      {
       var curmusic_$song = document.getElementById(\"music_$song\");
       curmusic_$song.currentTime=0;
      }

    </script>";
  }
 else
  {
   $autoplay = "autoplay=\"true\"";
  }

 if ($loop == true)
  {
   $songloop = " loop=\"true\"";
  }

 if ($loggeduser['mutemusic'] == 0)
  {
   return "
    </table>
    $resume
    <audio id=\"music_$song\" $autoplay$songloop preload=\"true\">
      <source src=\"$baseurl/boardfiles/effects/$song.ogg\" type=\"audio/ogg\" />
      <source src=\"$baseurl/boardfiles/effects/$song.mp3\" type=\"audio/mp3\" />
    </audio>
    <table class=\"brdr\" cellpadding=\"0\">";
  }
 }

它现在看起来很完美。 我改变了一些东西，现在按照我的意愿工作。 谢谢您的帮助！ :)

Answer 1

看起来您尝试在DOM可用之前执行document.getElementById("music_$song") 。 为此使用onload处理程序。

然而，我找不到任何调用alert()或alertplaytime()来让它等待 - 特别是不像你所描述的那样循环。

另外，行window.onload=settimecookie(); 马车。 当执行时， settimecookie不返回事件处理函数。