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>

setTimeout和promise

1 个答案: