Settimeout不等待为什么？

问题描述

在上部，“ if”内的两个settimeout均正常工作。但是下部的settimeout不会等待“ else”里面的那些。据我所知，我在这两部分中以完全相同的样式编写了它们。可能是什么原因？

    elementcopy.addEventListener('mouseleave',()=>{
                    elementcopy.classList.add('leavin');
                    setTimeout(() => {                                         //  THESE WORK PROPERLY
                        elementcopy.style.width = '36vw';
                        setTimeout(() => {
                            elementcopy.parentElement.removeChild(elementcopy);
                        },400);         
                    },400);
                })
            }
            else{
                element.classList.add('card-active');
                element.addEventListener('mouseleave',()=>{
                    element.classList.add('leavin-mob');
                    
                    setTimeout(() => {                                         //  THESE DOESN'T
                        element.style.height = '38vh';
                        setTimeout(() => {
                        },400);
                    },400);
                })
            }

解决方法

正如评论者之一所指出的，setTimeout不是一种sleep的方法。

 setTimeout(() => {                                        
      element.style.height = '38vh';             
  },800);

如果以后需要，只需增加超时值。

为进一步说明这一点，除非您在第二次超时中执行某些操作，否则嵌套setTimeout很少见，编写的代码本身可以正常工作，但无须执行-设置为400ms超级小时间。您可以运行下面的代码，以查看4秒后第二次超时的工作。

setTimeout(() => {
  //  THESE DOESN'T
  console.log("This is 400ms!");
  //element.style.height = '38vh';
  setTimeout(() => {
    console.log(
      "This is 4 seconds but you usually would call something else here otherwise it has no effect or value"
    );
  },4000);
},400);