javascript - 如何重复调用JavaScript函数

Question

我试图在执行后重复调用 JavaScript 函数。

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();
    }

startSlide() 函数迭代数组并从数组中获取值，然后调用函数 imgslider()。 imgslider() 函数将图像附加到 div。

在 imgslider() 的末尾，我尝试调用 startSlide() 以便它可以继续执行......但它不起作用。我该怎么做？

Answer 1

问题是您的代码正在创建无限递归...

维护代码结构，您可以添加一个标志来解决问题

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>

<小时/>

如果你想循环，那么你可以使用setInterval()代替

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>