Question

我一直在为此苦苦挣扎。我有一个推荐滑块。没什么花哨的，但我想在元素中添加过渡类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

您需要在resolve()中致电setTimeout()。

  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); });

承诺和setTimeout无法协同工作

2 个答案: