setTimeout顺序

Question

我想我和setTimeout()有问题了。

你可以访问我的网页，看看我在哪里：http://verbum.xtrweb/soon.php

问题是我有两个文本字段。

1. 带id="Verbum"的“凡夫俗子”
2. id="forget"中的“忘记单一搜索”

我想申请一个淡出后，小字典下降的效果(请参阅我的网站链接以上，以便您理解)。我也改变了函数的名称和变量，但是唯一发生的事情是，只有一个文本消失了，这取决于其中一个在另一个下面的顺序。没有褪色的，甚至没有出现。希望你能理解，找到和发现。谢谢。

<script type="text/javascript">
  var opac = 0.0;
  var alpha = 0;

  function init() {
    var elem = document.getElementById("Verbum");
    elem.style.display = 'inline';
    elem.style.filter = "alpha(opacity = " + alpha + ")";
    elem.style.opacity = opac;

    setTimeout("fadein()", 8500);
  }

  function fadein() {
    var elem = document.getElementById("Verbum");

    opac = opac + 0.1;
    alpha = parseInt(opac * 100);
    elem.style.opacity = opac;
    elem.style.filter = "alpha(opacity = " + alpha + ")";

    if (opac < 1.0) {
      //Change the 50 to adjust the speed. The higher the number, the slower the fade
      setTimeout("fadein()", 30);
    }

  }
  window.onload=init;
</script>

下面是第二个<script>块：

<script type="text/javascript">
  var opac = 0.0;
  var alpha = 0;

  function init() {
    var eleme = document.getElementById("forget");
    eleme.style.display = 'inline';
    eleme.style.filter = "alpha(opacity = " + alpha + ")";
    eleme.style.opacity = opac;

    setTimeout("fadein()", 7500);
  }

  function fadein() {
    var eleme = document.getElementById("forget");

    opac = opac + 0.1;
    alpha = parseInt(opac * 100);
    eleme.style.opacity = opac;
    eleme.style.filter = "alpha(opacity = " + alpha + ")";

    if (opac < 1.0) {
      // Change the 50 to adjust the speed. The higher the number, the slower the fade
      setTimeout("fadein()", 30);
    }

  }

  window.onload = init;
</script>

Answer 1

问题是，您只能将一个函数作为时间分配给window.onload。最后一个总是优先于第一个。

不使用window.onload，您可以使用window.addEventListener告诉浏览器在页面加载时运行代码。你可以这样用它。

window.addEventListener('load', function(){
    var eleme = document.getElementById("forget");
    eleme.style.display = 'inline';
    eleme.style.filter = "alpha(opacity = " + alpha + ")";
    eleme.style.opacity = opac;

    setTimeout("fadein()", 7500);
}, false);

你需要复制和粘贴这两次，一次是“忘记”，另一次是“凡夫俗子”。

另外，我建议更改fadein函数的名称，或者将元素作为参数传递。否则，您的代码将简单地运行最后一个fadein函数，“遗忘”或"Verbum“将正确工作，而另一个则不能工作。