jQuery: using setInterval and setTimeout

Question

I have some jQuery code with setInterval and setTimeout.

This seems to work every 6 seconds:

    var vasen = 0;

    setInterval(function() {
      vasen++;

      $('#valvonta').stop(true,true).css("left", vasen);

      var valvonta = 1;
      var kilpailu = 12;

      jQuery.post("ilmoittautuneet.php", {
        valvonta: valvonta,
        kilpailu: kilpailu
      }).done(function(data) {
      });
    }, 6000);

But this does not work every 6 seconds. It works only one time. What is the reason?

var vasen = 0;

(function valvonta() {
  vasen++;

  $('#valvonta').stop(true,true).css("left", vasen);

  var valvonta = 1;
  var kilpailu = 12;

  jQuery.post("ilmoittautuneet.php", {
    valvonta: valvonta,
    kilpailu: kilpailu
  }).done(function(data) {
  });
  setTimeout(valvonta, 6000);
})();

Terry · Accepted Answer · 2017-07-29 21:30:45Z

2

Your issue lies with the fact that you are overwriting what valvonta refers to in this line:

var valvonta = 1;

This means that valvonta will no longer refer to the function itself, but 1 instead. Therefore your function fails after the first run. To fix this issue, simply use another variable name:

var vasen = 0;

(function valvonta() {
  vasen++;

  $('#valvonta').stop(true,true).css("left", vasen);

  // Rename variables so they don't override `valvonta`
  var v = 1;
  var k = 12;

  jQuery.post("ilmoittautuneet.php", {
    valvonta: v,
    kilpailu: k
  }).done(function(data) {
  });

  setTimeout(valvonta, 6000);
})();

This solution, although functional, still makes it not very readable. What about simply calling a setInterval in the IIFE instead?

var vasen = 0;

(function () {
  // Declare function to be called recursively
  var valvonta = function() {
    vasen++;

    $('#valvonta').stop(true,true).css("left", vasen);

    // Rename variables so they don't override `valvonta`
    var v = 1;
    var k = 12;

    jQuery.post("ilmoittautuneet.php", {
      valvonta: v,
      kilpailu: k
    }).done(function(data) {
    });
  };

  // Recursively call function
  setInterval(valvonta, 6000);
})();

Update: I have a feeling that you might want to call the function after the done callback of your AJAX. If that is the case, you will need to rework the logic above:

var vasen = 0;

(function () {
  // Declare function to be called recursively
  var valvonta = function() {
    vasen++;

    $('#valvonta').stop(true,true).css("left", vasen);

    // Rename variables so they don't override `valvonta`
    var v = 1;
    var k = 12;

    // Store AJAX promise in variable
    var ajaxCall = jQuery.post("ilmoittautuneet.php", {
      valvonta: v,
      kilpailu: k
    });

    // When AJAX promise is resolved
    ajaxCall.done(function() {
        setTimeout(valvonta, 6000);
    });
  };

  // Call function for the first time
  valvonta();
})();

edited Jul 29, 2017 at 21:30

answered Jul 29, 2017 at 21:25

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xms Over a year ago

Do you mean that the problem is the fact that I have a function named as valvonta and a variable valvonta?

Terry Over a year ago

@xms Yes, that will be the root of your issue

Collectives™ on Stack Overflow

jQuery: using setInterval and setTimeout

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related