CODEWITHSUNDEEP
javascript
Ceejay
Ceejay

Reputation: 7257

How to call JavaScript function repeatedly

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?

Upvotes: 0

Views: 229

Answers (2)

BdR
BdR

Reputation: 3048

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.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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>

Upvotes: 1

Related Questions