How can I reuse a function properly?

Question

I try to make 3 basic slideshow.

I made this code for the first one and wanted to use it on the other 2 as well with the New slideS() method and with some parameter changing.But it's not working,even the first function is'nt working if I put parameter in it.

Can somebody explain me why is this not working and how to fix it?Thanks beforehand!

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

You could do something like this, using an object oriented approach:

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

Would that work for you? Then you are using pure functions and an object that can be used to start, stop, and manage any slide show.

Answer 2

You could use a closure over the element and the array and use setInterval instead of 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

I think you want like:

Remove setTimeout. And use setInterval:

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

Answer 4

try this... you are making mistake at some places

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)

hope this helps..

Answer 5

I assume it works when the function doesn't take a parameter?

Then, the reason it would work with no parameter, but stop working with a parameter, is that the setTimeout tries to recursively call the function but doesn't pass a parameter. So you'd change that to

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

But then when you try to run multiple instances of this concurrently, you'll get into trouble because your'e using global variables. You'll need to use something more local (perhaps closures?) for your lcv, for example.

Answer 6

You have to use setInterval instead of 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">