setTimeout並承諾

Question

我需要獲取數據，並且可能需要一些時間。如果需要超過100ms，我想顯示一個加載器。這是我做過什麼

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作品5秒因爲它包含了諸如

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

功能（因爲我想測試長取得處理）。

結果console.log僅在承諾解決後才被調用。我真的需要一個幫助來理解爲什麼會發生，以及如何解決這個問題

Answer 1

CSS是一個選項嗎？您可以立即設置課程並使用動畫來延遲效果。

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>