How to call JavaScript function repeatedly

Question

I am trying to call the JavaScript function repeatedly after the execution.

function startSlide(){
        var products = [
                        ['images/product_images/footwear/footwear_1.jpeg'],
                        ['images/product_images/mobile/mobile_1.jpeg'],
                        ['images/product_images/camera/camera_1.jpeg'],
                        ['images/product_images/fashion/fashion_1.jpeg'],
                        ['images/product_images/laptop/laptop_1.jpeg'],
                        ['images/product_images/furniture/furniture_1.jpeg']
                       ];
        for (var i = 0; i < products.length; i++) {
            var image = products[i][0];
            imgslider(image, i * 800);
        }
    };

    function imgslider(image, timeout)
    {
          window.setTimeout(function() {
          document.getElementById('imgslider').innerHTML = "";
          var product = document.getElementById('imgslider');
          var elem = document.createElement("img");
          product.appendChild(elem);
          elem.src = image;
          },timeout);
          startSlide();
    }

The startSlide() function iterates the array and fetch the value from array and call the function imgslider(). the imgslider() function appends the image to the div.

at the end of the imgslider() i am trying to call the startSlide() so that it could continue the execution.... but its not working. how can i do this?

So you just want to call a function multiple times? Is it that you want? Why not use either a for loop or a timer? — rst
– rst, Commented Jun 16, 2015 at 9:38
Wouldn't just removing startSlide(); in your imgslider fix it? You're in an endless loop, because in the first iteration of startSlide() you call startSlide() again, making you call it over and over again... — Tom D'Hulster
– Tom D'Hulster, Commented Jun 16, 2015 at 9:39
just follow the code for a second, you're calling startSlide, which calls imgslider which calls startSlide which calls imgslider..... it's an infinite loop — lordvlad
– lordvlad, Commented Jun 16, 2015 at 9:40

Arun P Johny · Accepted Answer · 2015-06-16 09:46:50Z

The problem is your code is creating an infinite recursion...

Maintianing your code structure you can add a flag to fix the problem

function startSlide() {
  var products = [
    ['//placehold.it/64X64&text=1'],
    ['//placehold.it/64X64&text=2'],
    ['//placehold.it/64X64&text=3'],
    ['//placehold.it/64X64&text=4'],
    ['//placehold.it/64X64&text=5']
  ];
  for (var i = 0; i < products.length; i++) {
    var image = products[i][0];
    imgslider(image, i * 800, i == products.length - 1);
  }
};

function imgslider(image, timeout, last) {
  window.setTimeout(function() {
    document.getElementById('imgslider').innerHTML = "";
    var product = document.getElementById('imgslider');
    var elem = document.createElement("img");
    product.appendChild(elem);
    elem.src = image;

    if (last) {
      setTimeout(startSlide, 800);
    }
  }, timeout);
}
startSlide()

<div id="imgslider"></div>

If you want to loop, then you can use setInterval() instead

function startSlide() {
  var products = [
      ['//placehold.it/64X64&text=1'],
      ['//placehold.it/64X64&text=2'],
      ['//placehold.it/64X64&text=3'],
      ['//placehold.it/64X64&text=4'],
      ['//placehold.it/64X64&text=5']
    ],
    i = 0;

  setInterval(function() {
    imgslider(products[i][0]);
    if (++i >= products.length) {
      i = 0
    }
  }, 800);
};

function imgslider(image) {
  document.getElementById('imgslider').innerHTML = "";
  var product = document.getElementById('imgslider');
  var elem = document.createElement("img");
  product.appendChild(elem);
  elem.src = image;
}
startSlide()

<div id="imgslider"></div>

BdR · Accepted Answer · 2015-06-16 09:52:00Z

0

That's because window.setTimeout only calls the function once, so you should use window.setInterval instead. Something like this:

window.setInterval(function () { /* code to update picture... */ }, 3000);

If it's still not working you can check the console log for errors.
That's F12 in IE or Ctrl+Shift+J in Chrome.

answered Jun 16, 2015 at 9:52

BdR

3,1282 gold badges24 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to call JavaScript function repeatedly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related