setTimeoutと約束

Question

データを取得する必要があり、時間がかかることがあります。 100ミリ秒以上かかると、ローダーを見せたい。 （私は長いフェッチプロセスをテストしたかったので）これは

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

などの機能が含まれています原因私は5秒間

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作品をやったことです。

結果として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>