如何反复调用JavaScript函数

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?

Answer 1

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> 

Answer 2

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.