setTimeout和Promise

Question

I need to fetch data, and it could take some time. If it takes more than 100ms I want to show a loader. This is what I did

fetchOptions(value, page = 0){
    return new Promise((resolve, reject) => { ... });
}

getOptions(text, page = 0) {
    if (this.requestTimeout) clearTimeout(this.requestTimeout);
    this.requestTimeout = setTimeout((()=>{
      console.log("!!");
    }), 100);

this.fetchOptions(text, page)
      .then(data => {
        //do something
        //if (this.requestTimeout) clearTimeout(this.requestTimeout);
      })
      .catch(e => console.log(e));
 }

fetchOptions works for 5 seconds cause it contains a function like

sleep(ms) {
    var unixtime_ms = new Date().getTime();
    while(new Date().getTime() < unixtime_ms + ms) {}
}

(because I wanted to test long fetching process).

As a result console.log is called only after promise resolved. I really need a help to understand why does it happen and how to solve this problem

Answer 1

Is CSS an option? You can set a class immediately and use animations to delay the effect.

 document.querySelector('button').addEventListener( 'click', () => document.querySelector('div').classList.toggle('effect'), false); 

 .effect { background-color:red; animation: effect 500ms forwards; border:1px solid black; } @keyframes effect { 0% {background-color:transparent;} 99% { background-color:transparent; } 100% {background-color:red;} } 

 <button type='button'>Toggle Class</button> <div>result</div>