setTimeout und Versprechen

Question

Ich muss Daten abrufen, und es könnte einige Zeit dauern. Wenn es mehr als 100ms dauert, möchte ich einen Loader anzeigen. Das ist, was ich tat

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 Werke für 5 Sekunden weil es eine Funktion wie

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

enthält (weil ich langen Abrufprozess testen wollte).

Als Ergebnis wird console.log nur nach dem Versprechen aufgerufen gelöst. Ich brauche wirklich eine Hilfe, um zu verstehen, warum es passiert und wie man dieses Problem löst

Answer 1

Ist CSS eine Option? Sie können eine Klasse sofort festlegen und Animationen verwenden, um den Effekt zu verzögern.

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>