javascript - Function executing instantly, not waiting for setTimeout -

i disable dropdown while while colors(interval) firing. in case manually set cutoff after 5 seconds. i'm experiencing when place re-activator in case block, not wait settimeout. or both calls firing @ same time , while settimeout firing (aka waiting 5 seconds) next call (the re-activator) fires well?

the other question —and reason wanted deactivate dropdown while colors firing —is noticed while colors firing, if clicked on dropdown again —aka fire off call it, second call result in colors endlessly firing (assuming infinite loops created somehow). thoughts on why?

 function timetohexcolor(){     var time = new date();     var timestamp = time.tostring("hh:mm:ss");     document.getelementbyid("board").innerhtml +=                                "#" + timestamp.split(":").join("") + "<br/>";    }  function colors(interval) {     this.interval = interval;     switch (this.interval) {         case 'second':              document.getelementbyid('options').disabled = true;             x = setinterval(timetohexcolor,1000);             settimeout(stopcolors, 5000);             //placing re-activtor here executes instantly not after settimeout.             //document.getelementbyid('options').disabled = false;             break;         case 'minute':              x = setinterval(timetohexcolor,60000);             settimeout(stopcolors, 5000);             document.getelementbyid('options').disabled = true;             break;                case 'hour':              x = setinterval(timetohexcolor,60000*60);             settimeout(stopcolors, 5000);             document.getelementbyid('options').disabled = true;             break;         case 'day':              x = setinterval(timetohexcolor,60000*1440);             settimeout(stopcolors, 5000);             document.getelementbyid('options').disabled = true;             break;         default:      } }  function stopcolors() {     clearinterval(x);     //placing re-activator here instead works way intended,     //after repeat cycle finished.     document.getelementbyid('options').disabled = false;  } $("#options").prop('selectedindex',-1); $("#options").change(function() {   colors('second'); }); 

i think you're expecting settimeout pause code execution. that's not settimeout does. schedules function pass execute @ later time , returns immediately.

if want structure code reactivator located near switch statement rather stopcolors use anonymous function:

document.getelementbyid('options').disabled = true;  x = setinterval(timetohexcolor,1000);  settimeout(function(){      stopcolors();      document.getelementbyid('options').disabled = false;  }, 5000); 

you notice same putting reactivator inside stopcolors exception not hardcoded in stopcolors (potentially making function more reusable?). it's style issue of want reactivator code be. mechanism behind settimeout still works same.

do note javascript single threaded. why functions settimeout , xmlhttprequest behave way - continuing execution of javascript until end of script , @ later browser execute given function. if try pause execution browser not given processing time things draw screen or accept user clicks or download ajax response.