Question

我构建了一个页面，用户可以在几秒钟内输入一个值，然后ping将以该间隔发声。我还整理了一个计时器，它应该与ping间隔同步。就像他们输入5 - 时钟应该超过5,10,15等......当ping发出声音时。由于一个我无法弄清楚的原因，声音似乎与时钟不完全同步，并且它运行的时间越长越好。谢谢你的帮助！

$(document).ready(function() {

  $('#set_ping').click(function() {
    interval = parseInt($('#ping_val').val()*1000,10);
    $('#ping_alert').text('The ping will sound every ' + interval/1000 + ' seconds.');
  });

  $('#go').click(function() {  
    timer();
    setInterval(sound, interval);

   });

  function sound() {
   $('#audio').append('<embed src="assets/audio/sound88.mp3" autostart="true" hidden="true" loop="false">');    
  }

  var seconds = 0;
  function timer() {setInterval(function() {
    $('#progress').text(seconds++/100);
  }, 10);
 }
});

Answer 1

这是因为timers in JavaScript are not exactly that accurate。另见here和here。此外，由于JavaScript是单线程的，因此定时器仅在没有其他任何内容执行时执行。如果您的页面正忙，那么实际“已安排”执行的内容会被“延迟”。

Answer 2

使用以下代码：

$(document).ready(function() {
var interval;
  $('#set_ping').click(function() {
    interval = parseInt($('#ping_val').val()*1000,10);
    $('#ping_alert').text('The ping will sound every ' + interval/1000 + ' seconds.');
  });

  $('#go').click(function() {  
    timer();
    setInterval(sound, interval);

   });

  function sound() {
   $('#audio').append('<embed src="assets/audio/sound88.mp3" autostart="true"     hidden="true" loop="false">');    
  }

  var seconds = 0;
  function timer() {setInterval(function() {
    $('#progress').text(seconds++/100);
    if(seconds % interval == 0){
       // play music here 
    } 
  }, 10);
 }
});

在代码更新时间的代码中，它还检查时间（你的seconds变量）是否有多个interval变量，并保持声音之间的时间间隔。注意interval是全局变量

jQuery Timer和声音没有同步

2 个答案: