[JS] Multiple setTimeouts

[Brian Miller]

Is there a more elegant way to do something like this?

setTimeout( gotoSlide,    520,  "side-ID-1");
setTimeout( gotoSlide,   1300,  "side-ID-2" );
setTimeout( gotoSlide,   2800,  "side-ID-3" );
setTimeout( gotoSlide,   5420,  "side-ID-4" );
setTimeout( gotoSlide,   6111,  "side-ID-5" );
setTimeout( gotoSlide,   6222,  "side-ID-6" );
setTimeout( gotoSlide,   7999,  "side-ID-7" );
setTimeout( gotoSlide,  12004,  "side-ID-8" );
setTimeout( gotoSlide,  16032,  "side-ID-9" );
...
setTimeout( gotoSlide,  941002,  "side-ID-150" );

Assume I may have up to 150 slides that I need to go to on a timeline that's not always at a fixed interval, and I don't want to write 150 lines of the setTimeout()  function.  In my example I have (520, 1300, 2800, 5420, 6111, 6222, 7999, etc.), and you can imagine this will be a long list of timeouts. 

Since the argument for the gotoSlide()  function uses a string like "side-ID-###", where the ### value is linear, incrementing from 1, I'm wondering if this could be done in some kind of loop, where the timeout interval value is derived from an array.  --That's my assumption at least.

Not sure how to write that code.  Could someone help me?

[+primortal Subscriber²]

Take a look at Automatic Slideshow, https://www.w3schools.com/howto/howto_js_slideshow.asp

[Brian Miller]

On 21/04/2023 at 06:27, primortal said:

Take a look at Automatic Slideshow, https://www.w3schools.com/howto/howto_js_slideshow.asp

Thanks, but it's not really a slideshow that I'm using. I only use that in my example to obfuscate my actual function. The slideshow example that you gave won't work because that works on the fix time; my function needs to be called on different intervals, e.g. 520, 1300, 2800, 5420, 6111, 6222, 7999 ... 941002

 

[+virtorio MVC]

function gotoSlide(id) {
  ...
}
const timeouts = [520, 1300, 2800, 5420, 6111, 6222, 7999, 12004, 16032, ..., 941002]
timeouts.forEach((t, index) => setTimeout(gotoSlide, t, `side-ID-${index+1}`))

Another approach is to only set the next timeout after a slide has been displayed, although I don't think there is any limit to the number of timeouts you can set at one time.

const timeouts = [520, 1300, 2800, 5420, 6111, 6222, 7999, 12004, 16032, 941002]

function displaySlide(id) {
  console.log('display slide', id)
}

function gotoSlide(index) {
  const id = `side-ID-${index+1}`
  displaySlide(id)
  if (index === timeouts.length-1) 
    return // end of timeouts, so don't display any more
  const t = timeouts[index+1]-timeouts[index]
  console.log('t', t)
  setTimeout(gotoSlide, t, index+1);
} 

setTimeout(gotoSlide, timeouts[0], 0)

 

[Brian Miller]

On 21/04/2023 at 16:53, virtorio said:

function gotoSlide(id) {
  ...
}
const timeouts = [520, 1300, 2800, 5420, 6111, 6222, 7999, 12004, 16032, ..., 941002]
timeouts.forEach((t, index) => setTimeout(gotoSlide, t, `side-ID-${index+1}`))

Another approach is to only set the next timeout after a slide has been displayed, although I don't think there is any limit to the number of timeouts you can set at one time.

const timeouts = [520, 1300, 2800, 5420, 6111, 6222, 7999, 12004, 16032, 941002]

function displaySlide(id) {
  console.log('display slide', id)
}

function gotoSlide(index) {
  const id = `side-ID-${index+1}`
  displaySlide(id)
  if (index === timeouts.length-1) 
    return // end of timeouts, so don't display any more
  const t = timeouts[index+1]-timeouts[index]
  console.log('t', t)
  setTimeout(gotoSlide, t, index+1);
} 

setTimeout(gotoSlide, timeouts[0], 0)

 

Thank you this is exactly what I was looking for. Can I ask with setTimeout(), is there a way to pause them all in one go and then resume them if need be? I'm not sure if setTimeout() has that capability

[+virtorio MVC]

On 22/04/2023 at 16:17, Brian Miller said:

Thank you this is exactly what I was looking for. Can I ask with setTimeout(), is there a way to pause them all in one go and then resume them if need be? I'm not sure if setTimeout() has that capability

There is no way to pause a timeout (as far as I know), but you can cancel one. You can probably achieve what you want by keeping track of the current timeout and index, such as in the example below:

const slideController = {
  _timeout: 0, 
  timeouts: [520, 1300, 2800, 5420, 6111, 6222, 7999, 12004, 16032, 941002],  
  current: 0,  
  gotoSlide(id) {
    console.log('goto page', id)
  },
  next() {
    const c = this.current
    this.gotoSlide(`slide-id-${c+1}`)
    if (c === this.timeouts.length-1) return
    this.current++
    this._timeout = setTimeout(() => this.next(), this.timeouts[this.current]-this.timeouts[c])
  },
  pause() {
    clearTimeout(this._timeout)
  },
  resume() {
    this.next()
  },
  start() {
    setTimeout(() => this.next(), this.timeouts[0])
  }
}

slideController.start()

// to pause
// slideController.pause()

// to resume
// slideController.resume()

 

[Brian Miller]

 

Your code was perfect!!! Thank you Thank you +virtorio

Edited April 22, 2023 by Brian Miller