Promises 和 setTimeout 不能一起工作

Question

我一直在为此苦苦挣扎。我有一个推荐滑块。没什么特别的，但我想向元素添加一个过渡 class 2 秒，然后将其删除。

此外，我正在使用此类项目来更加努力地推动自己。所以我正在尝试使用 Promises 来做到这一点，推荐来自 Fetch 调用。

出于某种原因，setTimeout 根本无法正常工作。调试器表示无需进入计时器即可解决。

     arrows.forEach((item) => {
        item.addEventListener('click',() => {
            return new Promise ((resolve,reject) => {
                container.classList.add('transition');
                setTimeout(() => {      
                    if (item.getAttribute('data-direction') == 'right'){
                        if(counter < array.length -1) {
                            counter ++;
                        } else {
                            counter = 0;
                        }
                    } else {
                        if(counter > 0) {
                            counter --;
                        } else {
                            counter = array.length -1;
                        }
                    }
                }, 5000)                
            }).then(resolve =>{
                testi(array,counter);
                container.classList.remove('transition');
            })
        });
    })

Answer 1

您需要在 setTimeout() 中调用 resolve()。

  arrows.forEach((item) => {
        item.addEventListener('click',() => {
            // no point in returning to an event listener
           new Promise ((resolve,reject) => {
                container.classList.add('transition');
                setTimeout(() => {      
                  /// do synchronous stuff

                  // then reolve promise
                  resolve()// include any value you want passed to next `then()`
                }, 5000)                
            }).then(resolve =>{
                testi(array,counter);
                container.classList.remove('transition');
            })
        });
    })

Answer 2

在您的代码中：

return new Promise ((resolve,reject) => {
                container.classList.add('transition');
                setTimeout(() => {      
                    if (item.getAttribute('data-direction') == 'right'){
                        if(counter < array.length -1) {
                            counter ++;
                        } else {
                            counter = 0;
                        }
                    } else {
                        if(counter > 0) {
                            counter --;
                        } else {
                            counter = array.length -1;
                        }
                    }
                }, 5000)   
              })

您没有解决或拒绝承诺。因此，promise 始终处于挂起状态，并且您的 then()（或 catch() 发生错误时）方法回调将永远不会执行。

这是一个例子：

let prom = new Promise ((resolve,reject) => {
  setTimeout(() => {
    
    resolve('succes!')
    
  }, 5000)
});

prom.then((res) => {console.log(res); });

Promises 和 setTimeout 不能一起工作

Promises and setTimeout is not working together

javascript

settimeout

es6-promise