Question

我在我的部分中有这个代码：

function showIt() {
document.getElementById("hid").style.visibility = "visible";
}
setTimeout("showIt()", 6000); // 1000 = 1 sec

function showIt() {
document.getElementById("hid2").style.visibility = "visible";
}
setTimeout("showIt()", 7000); // 1000 = 1 sec

我试图揭示两个独立的元素。但代码似乎总是只与第一个元素一起使用。

首先出现在页面上

<div id="hid2" style="visibility: hidden" class="video-arrow">
 <p>Ready for some help growing your business?</p>
 <div class="arrow-bg"><img src="img/arrow-bg.png" alt=""></div>
</div>

这就是第二次

<div id="hid" style="visibility: hidden" class="header-button">
<div class="header-button-center"> 
<a href="">
<p class="offer">
<u>YES!</u>I Want To Get Instant Access To Interactive Offer!
<span>&raquo;</span></p>
</a>
</div>
<p class="guarantee">No worries. Our offer comes with a 
<b>30-Day Money-Back Guarantee!</b></p>
</div>

由于div布局的性质，我不能将两个元素放在同一个隐藏的div中，并且...理想情况下，我会在不同的时间显示它们。

Answer 1

您不能拥有两个具有相同名称的不同功能。尝试更改名称第二个功能：

function showIt() {
document.getElementById("hid").style.visibility = "visible";
}
setTimeout(showIt, 6000); // 1000 = 1 sec

function showIt2 {
document.getElementById("hid2").style.visibility = "visible";
}
setTimeout(showIt2, 7000); // 1000 = 1 sec

Answer 2

你已经定义了showIt（）函数两次，如果你创建单个函数并将元素id作为函数参数传递就更好了，如

function showIt(id) {
     document.getElementById(id).style.visibility = "visible";
}

Answer 3

您的代码中有两个具有相同名称的不同功能，它们不正确。

试试这个：

function showIt1() {
document.getElementById("hid").style.visibility = "visible";
}
setTimeout(showIt1(), 6000); // 1000 = 1 sec

function showIt2() {
document.getElementById("hid2").style.visibility = "visible";
}
setTimeout(showIt2(), 7000); // 7000 = 7 sec

或者你也可以尝试这个：

function showIt(Id) {
  document.getElementById(Id).style.visibility = "visible";
}

setTimeout(showIt("hid"), 6000); // 1000 = 1 sec

setTimeout(showIt("hid2"), 7000); // 7000 = 7 sec

Answer 4

使用喜欢

function showIt1() {
document.getElementById("hid").style.visibility = "visible";
}
setTimeout("showIt1()", 6000); // 1000 = 1 sec

function showIt2() {
document.getElementById("hid2").style.visibility = "visible";
}
setTimeout("showIt2()", 7000); // 1000 = 1 sec

Answer 5

假装您是网络浏览器并阅读您的代码，s-l-o-w-l-y。

function showIt() {
document.getElementById("hid").style.visibility = "visible";
}
// cool, some code. This defines function showIt

setTimeout("showIt()", 6000); // 1000 = 1 sec
// a to do item.  He sent me a string instead of a function, so in 6 seconds 
// I will call eval on "showIt()";

function showIt() {
document.getElementById("hid2").style.visibility = "visible";
}
// hmm, he changes his mind.  OK, now this is function showIt
setTimeout("showIt()", 7000); // 1000 = 1 sec
// another to do item.  Another string.  
// So in 7 seconds I will execute "showIt()" means by using eval(). 

// 6 seconds go by.
// Time to run "showIt()".  Oh, its a function call.  
// Use the latest version of showIt(), displaying hid2.
// ...
// another second goes by
// Time to run "showIt()".  Same function we called a second ago.  
// Make hid2 visible again. Oh, it already is.  Oh, well.

关键点：

setTimeout不等待。它非常快。它设置了稍后要执行的东西。
执行“showIt（）”时，showIt（）是第二个版本
最好给setTimeout一个函数而不是一个调用函数的字符串，特别是对于只调用一次函数的情况。您可以在setTimeout参数列表中使用匿名函数。

的setTimeout（ function（）{document.getElementById（“hid”）。style.visibility =“visible”}， 6000）;

的setTimeout（ function（）{document.getElementById（“hid2”）。style.visibility =“visible”}， 7000）;

另请参阅：MDN docs for window.setTimeout()

Answer 6

function showIt() {
     setTimeout(function(){document.getElementById("hid").style.visibility =    "visible";},6000);
      setTimeout(function(){document.getElementById("hid2").style.visibility = "visible";},7000);
}

Answer 7

我认为原因是你有两个名为showIt的函数。第二个showIt将覆盖第一个。您可以尝试使用不同的函数名称。

Answer 8

您可以使用以下内容：

function showAndTimeOut (id, time)
{
      showIt(id);
      setTimeout(function(){/* Dummy anonymous function! */}, time); // 1000 = 1 sec

      // or may be you can use below line instead of above two:
      setTimeout(showIt(id), time);

 }

function showIt(id) 
{
     document.getElementById(id).style.visibility = "visible";
}

如需拨打电话，可以使用，

showAndTimeOut ("hid", 6000);
showAndTimeOut ("hid1", 7000);

javascript运行两次

8 个答案: