[EOS/CODE] setTimeout and setInterval polyfill for Eos

[fapnip]

Awhile back I was working on trying to get something like setTimeout and setInterval working in Eos without having to rely on Eos timer actions.

I never ended up using it in a tease, but figured I'd brush the cobwebs off this old example tease that attempts to emulate setTimeout and setInterval using audio events and release it, in case anyone wants to try it out.

Note: I've not done much cross-browser testing on it, so give it a good work-out and make sure it does what you want before you write anything that relies on it. (Please let me know if it works for you or not.)

Update^^: This timer polyfill is now being used by a few teases, and seems to be working well on most devices/browsers.

To INSTALL or UPDATE the core setTimeout functions/actions/files into an existing tease:

1. Open setTimeout demo as the source in Eos Magpie:
https://codepen.io/fapnip/full/GRjwPXP?id=45319&key=5ab58de466

2. Paste your tease's private share link as the target in Eos Magpie.

3. If installing for the first time, check the box for the "setTimeout" Magpie module. If updating, flip the switch for "Apply Auto Updates from Source".

4. Click the download button that will appear.

5. In the Eos Editor for your tease, download a back-up copy of your existing tease, just in case. (Seriously. Do it. Things can go wrong.)

6. Restore the downloaded merged magpie JSON from step 4 over your existing tease.

7. Ask for help here.


After you install the module, you use setTimeout/setInterval just like you normally would in standard JavaScript, but only after the polyfill has been loaded in your start page.

Example use (example code will not work unless you install the polyfill as described above):

Code: Select all

// Do something in one second
setTimeout(function() {
  console.log("You'll see me in about a second")
}, 1000)

// Do something every two seconds
var twoSecondIntervalId = setInterval(function() {
  console.log("You'll see me every two seconds, until I get shut down")
}, 2000)

// Stop the 2 second interval in 20 seconds
setTimeout(function() {
  console.log("Shutting down 2 second interval")
  clearInterval(twoSecondIntervalId)
}, 20000)

Here it is (You'll need to open your browser's console window to see anything):
https://milovana.com/webteases/showteas ... 5ab58de466

And here's the JSON for it:
https://milovana.com/webteases/geteossc ... 5ab58de466

For a more in-depth example of the kind of things you can do with it, see:
viewtopic.php?f=2&t=24011

and:
viewtopic.php?f=2&t=24081

[boundupone]

Following up from the other thread - viewtopic.php?f=2&t=24079&p=303420#p303420

I am still having issues to get this to work.

I followed your instructions, but when I use below

Code: Select all

setTimeout (function() {
  volume = volume + teaseramps

  Sound.get('estim').setVolume(volume/100)
}, 60000)

It ramps the sound up once as expected, but then doesn't do it again each 60 seconds. Any ideas?

[fapnip]

It ramps the sound up once as expected, but then doesn't do it again each 60 seconds. Any ideas?

setTimeout will only execute the function once, after the specified ms.

setInterval will re-execute the function until you use a clearInterval on the ID returned from setInterval.

So, you'd need to use setInterval, or re-execute the function in another setTimeout from the function referenced in the first setTimeout. But either way, you'll need a way to cancel the timers, else they'll just keep running.

Or you can just use the Eos extension I wrote for fading volume in/out over time. See:
viewtopic.php?f=2&t=24081

If you use my fadeTo extension and you're always ramping over super long amounts of time, like minutes instead of seconds, you'll probably want to change the step size to something larger, like 250, to avoid unnecessary high CPU use. (see: var stepSize = 20 // ms between volume change steps line in the fadeTo installation eval)

[fapnip]

I should add: You'll want to make sure you do at least one setTimeout(function(){/* Just do it */}, 0) in an eval immediately following a user's click, like right after a choice option. This makes sure the browser is authorized to play the audio elements required by the polyfill, since Eos unfortunately doesn't do that on its own very well.

[boundupone]

It ramps the sound up once as expected, but then doesn't do it again each 60 seconds. Any ideas?

setTimeout will only execute the function once, after the specified ms.

setInterval will re-execute the function until you use a clearInterval on the ID returned from setInterval.

So, you'd need to use setInterval, or re-execute the function in another setTimeout from the function referenced in the first setTimeout. But either way, you'll need a way to cancel the timers, else they'll just keep running.

Or you can just use the Eos extension I wrote for fading volume in/out over time. See:
viewtopic.php?f=2&t=24081

If you use my fadeTo extension and you're always ramping over super long amounts of time, like minutes instead of seconds, you'll probably want to change the step size to something larger, like 250, to avoid unnecessary high CPU use. (see: var stepSize = 20 // ms between volume change steps line in the fadeTo installation eval)

Yay! Finally, it seems to be working. Thanks for your help

[boundupone]

I should add: You'll want to make sure you do at least one setTimeout(function(){// Just do it}, 0) in an eval immediately following a user's click, like right after a choice option. This makes sure the browser is authorized to play the audio elements required by the polyfill, since Eos unfortunately doesn't do that on its own very well.

Do you mean after every click, or just one time?

[fapnip]

Do you mean after every click, or just one time?

Just one time, like in first choice action in your tease, but before you use the timers for anything of consequence.

[boundupone]

Do you mean after every click, or just one time?

Just one time, like in first choice action in your tease, but before you use the timers for anything of consequence.

OK, thanks man, added it now.

Finally i can get on with actually scripting the tease rather than getting the basics to work :)

[im_inconclusiv]

To INSTALL or UPDATE the core setTimeout functions/actions/files into an existing tease:

1. Open setTimeout demo as the source in Eos Magpie:
https://codepen.io/fapnip/full/GRjwPXP?id=45319&key=5ab58de466

2. Paste your tease's private share link as the target in Eos Magpie.

3. If installing for the first time, check the box for the "setTimeout" Magpie module. If updating, flip the switch for "Apply Auto Updates from Source".

4. Click the download button that will appear.

5. In the Eos Editor for your tease, download a back-up copy of your existing tease, just in case. (Seriously. Do it. Things can go wrong.)

6. Restore the downloaded merged magpie JSON from step 4 over your existing tease.

7. Ask for help here.

Works like a charm for me, thanks man!

I'm not in playing sounds right now.. more oriented on some sort of time-counter, and for sure setInterval does the job. Perhaps there are more efficient ways to monitor time spent on pages (I am not an expert of JS), but for the first draft of my webtease your code is great!

[wompi72]

Hey,
thanks for providing these methods.

I tried your described method, but got an 403 for the cors.bridged.cc urls you call when trying to download teases.

I descripted a workaround here: viewtopic.php?p=360166