我有三个
HTML div,mm,ss和pp的
JavaScript.这三个字段相互动画…如果外部文件的内容发生变化,这些字段会在我的页面中更新.他们会更新动画.
如果mm改变,那么：
> ss隐藏,然后
> pp隐藏,然后
> mm隐藏,然后
>然后,div更新
> mm显示,然后
> pp显示,然后
> ss表示,然后
如果mm没有改变,但pp确实如此,div更新
> pp显示,然后
如果mm和pp没有改变,但是ss确实改变了,div更新
> ss表示,然后
我有这个代码运行,但它非常麻烦,我想知道是否有更好的方法来做我正在做的事情：
if ($('#mm').html() != mm) {
hideElem('.score');
setTimeout(function() {
hideElem('.player');
setTimeout(function() {
hideElem('.match');
setTimeout(function() {
updateElems();
setTimeout(function() {
showElem('.match');
setTimeout(function() {
showElem('.player');
setTimeout(function() {
showElem('.score');
},inSpeed);
},inSpeed);
},outSpeed);
},outSpeed);
},outSpeed);
},outSpeed);
} else if ($('#pp').html() != pp) {
hideElem('.score');
setTimeout(function() {
hideElem('.player');
setTimeout(function() {
updateElems();
setTimeout(function() {
showElem('.player');
setTimeout(function() {
showElem('.score');
},inSpeed);
},outSpeed);
} else if ($('#ss').html() != ss) {
hideElem('.score');
setTimeout(function() {
updateElems();
setTimeout(function() {
showElem('.score');
},outSpeed);
}
setTimeouts的原因是因为所有动画.
解决方法
使用
Promises和
async/await.
您的代码可能如下所示：
const wait = ms => new Promise(resolve => setTimeout(resolve,ms))
;(async () => {
if ($('#mm').html() !== mm) {
hideElem('.score')
await wait(outSpeed)
hideElem('.player')
await wait(outSpeed)
hideElem('.match')
await wait(outSpeed)
updateElems()
await wait(outSpeed)
showElem('.match')
await wait(inSpeed)
showElem('.player')
await wait(inSpeed)
showElem('.score')
} else if ($('#pp').html() !== pp) {
hideElem('.score')
await wait(outSpeed)
hideElem('.player')
await wait(outSpeed)
updateElems()
await wait(outSpeed)
showElem('.player')
await wait(inSpeed)
showElem('.score')
} else if ($('#ss').html() !== ss) {
hideElem('.score')
await wait(outSpeed)
updateElems()
await wait(outSpeed)
showElem('.score')
}
})()
Edge旁边的任何浏览器(以及带标志的Chrome)都不支持async / await,因此您必须使用Babel来编译代码.
