How to interrupt cyclical javascript?

Question

I have a task to make web-page which shows server time (ajax) and have option to increment/decrement hours. It will be php+js. I have done next js:

$(document).ready(function() {

function update() {
  $.ajax({
   type: 'POST',
   url: 'clocks.php',
   timeout: 1000,
   success: function(data) {
      $("#clock_place").html(data); 
      window.setTimeout(update, 1000);
   }
  });
 }

 update();
});

And next php script:

<?php

$TIME = date('d/m/Y h:i:s');
switch($_POST["increment"]){
    case "-":
        $TIME=strtotime("-1 hour", strtotime($TIME));
        echo date('d/m/Y h:i:s', $TIME);
        break;
    case "+":
        $TIME=strtotime("+1 hour", strtotime($TIME));
        echo date('d/m/Y h:i:s', $TIME);
        break;
    default:
        echo $TIME;
}
?>

Well now I would like to hear buttons "+" and "-" onclick like this:

$("#send1").click(function(){
  var param = {
    increment: $("#send1").val(),
  }
  $.post("clocks.php", param);
});

$("#send2").click(function(){
  var param = {
    increment: $("#send2").val(),
  }
  $.post("clocks.php", param);
});

How can I do this? I tried, but I suppose that I can't interrupt js which renews time. Any advise!

You could store the "+" "-" as integer 0=default in javascript when pressed and then just alter the time returned by the php by the integer value when displayed. Or pass that value to the php in the ajax call and manipulate it on the php file before getting returned. Either way you need something to "remember" how many times + or - was clicked. — Danny, May 12 '17 at 18:59
Try clearing your timeout in the `update()` which executes your update every second, then re-instantiate it on your button clicks. — sesamechicken, May 12 '17 at 19:27

score 0 · Accepted Answer · edited May 23 '17 at 12:02

You will need to use some kind of memory, I suggest localStorage or sessionStorage (sessionStorage is more likely to your purpose). Store your increment/decrement into a variable (can call hoursCounter ou continue being called increment) into sessionStorage and send it to ajax. The important part is SEND TO AJAX THE VALUE OF INCREMENT AND STORE THAT VALUE INTO JS OR HIDDEN HTML.

Try that:

$(document).ready(function() {

function update() {
  $.ajax({
   type: 'POST',
   url: 'clocks.php',
   data: {
     increment: sessionStorage.getItem('increment')
   },
   timeout: 1000,
   success: function(data) {
      $("#clock_place").html(data); 
      window.setTimeout(update, 1000);
   }
  });
 }

 update();
});

//Your routine it's so fast that don't need to trigger when click, just wait the next call from timeout routine!
$("#send1, #send2").click(function(){
  sessionStorage.setItem('increment', $(this).val());
});

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — Jay Blanchard, May 12 '17 at 19:25

How to interrupt cyclical javascript?

1 Answers1