multithreading - Custom timer in JavaScript -

multithreading - Custom timer in JavaScript -

i have array of image urls , need show each image exact amount of time (750 ms). have implemented page using settimeout function , works fine except time want display each image grows 752ms or more...

according post , many others, have created new function:

function gettimestamp() { homecoming window.performance.now(); } function waitfor( time, nextfunction ) { var t1 = gettimestamp(); console.log("start time: " + t1); var t2 = gettimestamp(); while ( t2 - t1 <= time) { t2 = gettimestamp(); } console.log("end time: " + t2); nextfunction(); }

i know javascript excuted in single thread , if run wait function implemented using while statement, main thread of page frozen. in other words, function executed synchronous. in case, "frosen" time used nowadays pictures, it's fine me.

i changing image source following:

var url = "images/practice" + imagesarr[randomnum] +".png"; console.log("image path: " + url); imagesarr.splice(randomnum, 1); pictureimg.src = url; pictureimg.style.display="block";

despite fact code changes image source perfectly, browser won't alter image. displays first image displayed , mixes order.

my page here.

importantly, website running in chrome.

i puzzled here , appreciate help!!!

thank you, max.

...except time want display each image grows 752ms or more...

if beingness out 2ms problem, can't utilize browser this.

basically, when alter src of image, browser isn't required update display right away, , won't; instead, may wait until current "task" in javascript code completes (e.g., event handler returns, timer function returns, etc.). updating src , locking browser isn't going want.

if alter src, settimeout(..., 750);, , return, that's best can in browser. it'll update display , phone call in roughly 750ms next thing. can't more precise that.

but if want go on seek busy-wait approach, 1 way set src, grab current time, settimeout(..., 0), , come in busy-wait when timer fires (which somewhere between 0 , 10 milliseconds later). since know when changed src, know when 750ms later is. note don't know when human started seeing image, couple of milliseconds after src set.

side note: assume you're pre-loading these images before starting, , when set src, come cache. if not, you'll want that, delay while image beingness fetched couple of dozen milliseconds @ best, quite lot more @ worst.

javascript multithreading time timer preferences