如何正确重用功能？

Question

我尝试制作3个基本幻灯片。

我为第一个编写了此代码，并希望通过New slideS（）方法和一些参数更改在其他两个代码上使用它。但是它不起作用，即使第一个函数也无法正常工作将参数放入其中。

有人可以向我解释为什么这不起作用以及如何解决它吗？谢谢！！

var img = document.getElementById("asd");
var imgArr = ["1.jpg", "3.png", "3.png"];
var i = 0;

function slideS(a) {

  a.src = imgArr[i];

  if (i < imgArr.length - 1) {

    i++;

  } else {

    i = 0;
  }
  setTimeout("slideS()", 1500);
}
slideS(img)

Answer 1

您可以使用面向对象的方法执行以下操作：

function SlideShow(el, imagesArray, msDelay) {
  this.el = el;
  this.images = imagesArray;
  this.delay = (msDelay) ? msDelay : 1000;
  this.timer = null;

  this.Run = function () {
    var self = this;
    var index = 0;
    this.timer = setInterval(function(){
      self.el.src = self.images[index++ % self.images.length];
    }, this.delay);
  }

  this.Stop = function() {
    this.timer = null;
  }
}

var img = document.getElementById("asd");
var imgArr = ["1.jpg", "3.png", "3.png"];
var delay = 1500;
var ss = new SlideShow(img, imgArr, delay);
ss.Run();
...
ss.Stop();

这对您有用吗？然后，您将使用纯函数和可用于开始，停止和管理任何幻灯片放映的对象。

Answer 2

您可以对元素和数组使用闭包，并使用setInterval代替setTimeout。

function slide(id, array) {
    function swap() {
        image.src = array[i];
        i++;
        i %= array.length;
    }

    var image = document.getElementById(id),
        i = 0;

    setInterval(swap, 1500);
}

slide('image1', ['http://lorempixel.com/400/200/', 'http://lorempixel.com/400/200/', 'http://lorempixel.com/400/200/']);

<image id="image1"></image>

Answer 3

我想你想像

删除setTimeout。并使用setInterval：

setInterval(function(){
  slideS(img)
},1500)

Answer 4

尝试一下...您在某些地方犯了错误

var img = document.getElementById("asd");
var imgArr = ["1.jpg", "3.png", "3.png"];
var i = 0;

function slideS(a) {

  a.src = imgArr[i];

  if (i < imgArr.length - 1) {

    i++;

  } else {

    i = 0;
  }

  setTimeout(() => slideS(a), 1500);
/* you need to pass function to setTimeout and pass refrence of image that's 'a' */

// or use function instead of arrow function

  setTimeout(function() { slides(a) }, 1500);

}
slideS(img)

希望这会有所帮助。

Answer 5

我认为函数不带参数时可以正常工作吗？

然后，它不使用任何参数但停止使用参数的原因是setTimeout尝试递归调用该函数但不传递参数。所以您将其更改为

setTimeout(() => {slideS(a);}, 1500);

但是，当您尝试同时运行多个实例时，您会遇到麻烦，因为您正在使用全局变量。例如，您需要为lcv使用更本地的内容（也许是闭包？）。

Answer 6

您必须使用setInterval而不是setTimeout

var img = document.getElementById("asd");
var imgArr = ["https://i.stack.imgur.com/lgt0W.png", "https://i.stack.imgur.com/X0fKm.png", "https://i.stack.imgur.com/YfPSD.png"];
var i = 0;

function slideS(a) {


  a.src = imgArr[i];

  if (i < imgArr.length - 1) {

    i++;

  } else {

    i = 0;
  }
}

slideS(img);  //initial call to start it without having to wait for 1500 ms to pass

setInterval(function() {
    slideS(img);
}, 1500);

<img id="asd">