2016-04-18 3 views
1

Я сделал таймер, но мне нужно, чтобы что-то произошло каждые 5 или 10 секунд. Я не хочу использовать функцию setTimeout или setInterval, но когда я использую этот таймер, я не знаю, как задать значение секунд. должно ли оно быть написано как 5000 или что-то еще?отправить предупреждение через 5 секунд, 15 секунд ... с помощью таймера

function display(){ 
    var endTime = new Date(); 
    var timeDiff = endTime - startTime; 
    timeDiff /= 1000; 

    var seconds = Math.round(timeDiff % 60); 
    timeDiff = Math.floor(timeDiff/60); 

//showing the seconds passed 
    $("#time").text(seconds); 
    setTimeout(display,1000); 
} 

//starts the timer 
$("#start").click(function() { 
    startTime = new Date(); 
    setTimeout(display,1000); 
}); 

/confirms it is 5 seconds 
if (timeDiff == 5){ 
    alert('now'); 
} 
+0

Все, что вам нужно сделать, это изменить 1000 на интервале 5000 миллисекунды, в обоих местах, где вы используете SetTimeout. Не используйте setInterval, что бы вы ни делали. Используйте либо setTimeout, либо requestAnimationFrame. Предпочтительно requestAnimationFrame, но если вы это сделаете, вам нужно будет написать код для управления, когда вы будете обрабатывать, основываясь на разности тиков в кадрах. – ManoDestra

+0

@ManoDestra Не сказал setInterval - это решение, но мне любопытно, почему вы говорите: «Не используйте setInterval, что бы вы ни делали»? – mhodges

+0

setInterval запускает код независимо от того, завершился ли он на каждом тике или нет. Он может легко наращивать вызовы в стеке браузера, а затем подвержен ужасным проблемам производительности. Вы всегда должны использовать setTimeout или желательно requestAnimationFrame, где это возможно. Если вы делаете только что-то очень легкое, и ваш интервал не слишком низкий, значит, это нормально, но я все равно использую setTimeout над setInterval каждый раз. Ваш код здесь в основном хорош, но просто измените свой миллисекундный интервал, и вам не нужно будет проверять временные различия :) – ManoDestra

ответ

0

Ваш код, кажется, хорошо .. Если его работы по таймеру, то единственное, что вам нужно сделать, это переместить проверить состояние для TimeDiff внутри функции дисплея следующим образом:

<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script> 
 
    <script> 
 
    $(document).ready(function(e) { 
 

 

 
     var prevSec = 0, 
 
     totalTime = 0; 
 

 
     function display() { 
 
     var endTime = new Date(); 
 
     var timeDiff = endTime - startTime; 
 
     timeDiff /= 1000; 
 

 
     var seconds = Math.round(timeDiff % 60); 
 
     timeDiff = Math.floor(timeDiff/60); 
 

 
     //showing the seconds passed 
 
     $("#time").text(seconds); 
 
     //confirm it is 5 seconds 
 
     if (seconds - prevSec == 5) { 
 
      prevSec = seconds; 
 
      totalTime = totalTime + 5; 
 
      $("#text2").text("Another round of 5 seconds is over. Total time : " + totalTime + " seconds"); 
 
      // Do whatever you want 
 

 
     } 
 

 
     setTimeout(display, 1000); 
 
     } 
 

 
     //starts the timer 
 
     $("#start").click(function() { 
 
     startTime = new Date(); 
 
     setTimeout(display, 1000); 
 
     }); 
 

 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    Time: 
 
    <p id="time"></p> 
 
    <button id="start">start</button> 
 
    <br> 
 
    <br> 
 
    <br>Display Text : 
 
    <p id="text2"></p> 
 
</body> 
 

 
</html>

Смежные вопросы