JS用setTimeOut延迟执行一段代码？

有时候，我们需要在某一个div的动画执行之后，再执行另一个div的动画。

这个时候可以用到这个代码：

deviceM.style.animation = 'display 0.4S ease-out 0.4S'

ease-out表示动画延迟0.4S执行。

但是，有问题的是，动画只是负责实现一个切换功能，动画并不能更改它归属盒子的属性。

比如说下面的JS代码：

if (flag) {
            closeDevice.src = './images/drop.png'
            deviceCate.style.transition = 'all 1.2S'
            deviceCate.style.height = '61px'
            deviceM.style.animation = 'hide 0.2S'
            deviceM.style.opacity = 0
            return flag = false
        }
        else {
            closeDevice.src = './images/pull.png'
            deviceCate.style.transition = 'all 1.2S'
            deviceCate.style.height = '342px'
            deviceM.style.animation = 'display 0.4S ease-out 0.4S'
            return flag = true
        }

注意看else的功能实现。

我预想的是，在deviceM执行完动画之后，再更改它的opacity值，让它的出现显得不那么突兀。但是这个时候，如果我把这个代码写在执行完动画后的下一行，然后再执行代码，就会出现下面的情况：

deviceCate动画一开始执行的时候，0S的时候就会直接出现deviceM，然后0.4S之后deviceM再执行display动画，再0.4S之后动画执行完毕，显示deviceM。

这个时候，我看到的画面是一闪，然后动画执行，缓慢出现deviceM，然后再一闪。

但，这个过程并不是我想要的结果，我要的执行顺序是下面这个：

deviceCate动画一开始的时候，过了0.4S之后deviceM才执行display动画，但是在0S的时候，deviceM是不显示的，只有在动画开始之后deviceM才会显示。

也就是说，在deviceCate执行之后，再过大概0.8S，系统才继续执行deviceM透明度更改的代码。

我预想看到的效果是：deviceCate动画执行了0.4S之后，系统才执行deviceM的动画，然后再过0.4S之后，系统执行完deviceM的动画。这个时候如果不把deviceM的opacity值改为1，deviceM会消失，然后这个时候（0.8S的时候），我们再修改它的值就可以完美接上上面的动画执行。

一开始的时候，我首先想到了animation-delay，但是很明显，这个是不行的。

这个代码只会执行一次，在第二次执行这个代码时就会失效，所以只能考虑别的代码了。

所以这个时候，只能换一种方式了。

换什么方式好？

我找了很久，都没找到我需要的方式，后来想到我们可以通过setTimeOut的方式来进行延迟执行该代码。

于是就有了下面这段：

setTimeout(function () {
                deviceM.style.opacity = 1
            }, 800)

完美解决问题，在deviceM动画执行之后，再更改了它的透明度，然后延迟执行的时间，跟动画时间保持一致，不会出现突现的情况。