• 0

[JS] Multiple setTimeouts


Question

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?

Link to comment
https://www.neowin.net/forum/topic/1428242-js-multiple-settimeouts/
Share on other sites

6 answers to this question

Recommended Posts

  • 0
  On 21/04/2023 at 13:27, primortal said:

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

Expand  

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

 

  • 0
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)

 

  • 0
  On 21/04/2023 at 23: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)

 

Expand  

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

  • 0
  On 22/04/2023 at 04: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

Expand  

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

 

  • Like 3

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • If that were the reason then Edge would be the most popular desktop browser instead of Chrome. If people can skip Edge and manually download/install Chrome, they can do it with Firefox, too.
    • Good Bye and thanks for the fish
    • yeah i did some research and it seems they removed (or didn't carry over) the ability to change desktop icon fonts.....hopefully they bring it back for you soon...and yeah it also seems the ability to change the font has also been removed unless you adjust through registry or win aero.    if you haven't already, maybe trying to "adjust cleartype text" may help you. i tried running through it and noticed there were some bold font styles.   welcome (or bye haha) to windows 2025 btw!  
    • That'll be it for my 2018 Mac mini then. There is, of course, OpenCore Legacy Patcher . . .
    • Support cost cutting and nudging people to upgrade for profit. Pure and simple. Nothing as noble as hardware actually becoming "obsolete" about most of the hardware requirements from Apple, Microsoft, or Android companies either. iMac 2017 with AMD running legacy Core still have native GPU support in macOS 15 and run perfectly fine. Doesn't even need any fancy patching outside of the minimum patching needed to get macOS 15 on the system to bypass Apple system requirements aking to running windows 11 on a PC that doesn't match the arbitrary CPU generation requirements that make you bypass them too. You can usually tell if hardware is truly in the realm of "obsolete" if you are having a hard time finding a major Linux distro that'll install on it.
  • Recent Achievements

    • Week One Done
      abortretryfail earned a badge
      Week One Done
    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
    • One Year In
      Vladimir Migunov earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      486
    2. 2
      +FloatingFatMan
      256
    3. 3
      snowy owl
      243
    4. 4
      ATLien_0
      222
    5. 5
      +Edouard
      191
  • Tell a friend

    Love Neowin? Tell a friend!