Javascript

Question

我这辈子似乎无法从这个片段中得到任何结果。我希望函数在每次执行后添加并删除一个额外的 class 到 ID 为 "ring" 的所有元素，并增加延迟。 setTimeout()函数的其他例子都是这样写的。

function flash_rings()
{
    var e = document.getElementById("ring");
    setTimeout(function(){e.className = "ring hover";}, 1000);
    setTimeout(function(){e.className = "ring";}, 1000);
}

class 已经编写和测试，所以我知道这不是 CSS 的错。该函数将在 <body> 的 onload= 事件中调用。代码片段位于页面的最底部，就在 </body> 标记上方。

帮忙？

谢谢，

~锡安

Answer 1

他们几乎同时开火。一个超时不会等待另一个。只需将那秒更改为 2000：

setTimeout(function(){e.className = "ring";}, 2000);

Answer 2

作为，它们一个接一个地发生，一秒钟后。

如果您希望第二个发生 在第一个 之后：

function flash_rings()
{
    var e = document.getElementById("ring");
    setTimeout(function(){
        e.className = "ring hover";
        setTimeout(function(){
            e.className = "ring";
        }, 1000);
    }, 1000);
}

或者

function flash_rings()
{
    var e = document.getElementById("ring");
    setTimeout(function(){ e.className = "ring hover"; }, 1000);
    setTimeout(function(){ e.className = "ring"; }, 2000);
}

后一个连接较少，但您可以相当确定第二个会在第一个之后大约一秒钟发生，除非页面真的忙于做其他事情事物。（如果第一个不是也计时器的东西，你就不会这样做；如果它是 ajax 之类的，你肯定会等待第一个完成安排第二个。)

Javascript - 为什么这个 setTimeout 函数不起作用？

Javascript - Why isn't this setTimeout function working?

html

css

settimeout