What would be a good approach to best implement setInterval using setTimeout?
Take into account that the mocked setInterval should be able to be "cleared".
- stackoverflow.com/help/self-answervsync– vsync2018-06-03 09:48:01 +00:00Commented Jun 3, 2018 at 9:48
- Why do you want to do that? What refrains you form using the built-in implementation?Kaiido– Kaiido2018-06-03 09:51:13 +00:00Commented Jun 3, 2018 at 9:51
- 1because I was challenged by someone, for fun. not all programs have real-life purpose, and it's alright to create things for pure fun.vsync– vsync2018-06-03 09:52:48 +00:00Commented Jun 3, 2018 at 9:52
- In that case would you accept this Q/A as a dupe? There the challenge was even more fun. Or even this one which shows an implementation with a real use case.Kaiido– Kaiido2018-06-03 09:54:49 +00:00Commented Jun 3, 2018 at 9:54
- Of "implementing your own timing function with no real goal".Kaiido– Kaiido2018-06-03 09:59:27 +00:00Commented Jun 3, 2018 at 9:59
| Show 4 more comments
5 Answers
Here the intervalId is the reference object that contains the timeoutId. The reference object changes every time the setTimeout is called recursively.
const _setInterval = (callback, delay) => { const timerRef = { id: null }; const timeout = () => { timerRef.id = setTimeout(() => { callback(); timeout(); }, delay); } timeout(); return timerRef; }; const timerRef = _setInterval(() => { console.log("Callback"); }, 1000); setTimeout(() => { clearTimeout(timerRef.id); }, 5000); 
Comments
To mock setInterval accurately, ons has to mock clearInterval too:
{ const intervals = new Map(); function setInterval(fn, time, context, ...args) { const id = Math.floor(Math.random() * 10000); intervals.set(id, setTimeout(function next() { intervals.set(id, setTimeout(next, time)); fn.apply(context, args); }, time)); return id; } function clearInterval(id) { clearTimeout(intervals.get(id)); } } And you can use it as always:
const interval = setInterval(console.log, 100, console, "hi"); clearInterval(interval); 
1 Comment
Kaiido
I might be misreading (on a phone rn) but I think your implementation will make it impossible to clear the interval from the callback.
I have a promise based solution without recursion :)
function setInterval1(fn, time) { let check = { check: true }; (async function () { for (let i = 0; i < Number.POSITIVE_INFINITY && check.check; i++) { await new Promise((resolve) => { setTimeout(() => { fn(); resolve(true); }, time); }); } })(); return check; } let check = setInterval1(() => console.log('hi'), 1000); function clearInterval1(check) { check.check = false; } setTimeout(() => { clearInterval1(check) }, 4000) 
Comments
Below code creates a mock implementation of setInterval using setTimeout
function interval(cb, ms){ var a = { clear : function(){ clearTimeout(a.timer) } }; (function run(){ cb(); a.timer = setTimeout(run, ms); })(); return a; } var myInterval_1 = interval(()=>{ console.log(1) }, 1000); // create an "interval" var myInterval_2 = interval(()=>{ console.log(2) }, 1000); // create another "interval" // clear the first interval setTimeout(()=>{ myInterval_1.clear() }, 4000)8 Comments
Kaiido
That doesn't respect the specs at all.
vsync
@Kaiido - what specs? what are you talking about? this works, why the downvote?
Kaiido
Because setInterval implementation is specified by some documents, and that you don't apply these specifications, i.e adding a fool-guard against infinity loops.
vsync
you are taking all this too seriously. I am only having fun with javascript, a language which I love and code for the last 13 years.
Kaiido
Sorry, but I don't see the fun in this implementation at all.
|
Another form to append it in window object and mimic global setInterval and clearInterval
(function (window) { const idMap = {}; window.customSetInterval = (cb, duration) => { let x = null; const loop = (cb) => { const y = setTimeout(() => { cb(); loop(cb); }, duration); if (!idMap[x]) { x = y; } idMap[x] = y; }; loop(cb); return x; }; window.customClearInterval = (x) => { clearTimeout(idMap[x]); }; })(window); 