setTimeout и обещание

Question

Мне нужно получить данные, и это может занять некоторое время. Если требуется более 100 мс, я хочу показать загрузчика. Это то, что я сделал

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>