html - 设置超时顺序

Question

我想我遇到了麻烦setTimeout()。

您可以访问我的网页以查看我的位置：http://verbum.xtrweb/soon.php

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

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。最后一个总是优先于第一个。

代替 using 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);

您需要复制并粘贴两次，一次用于“忘记”，一次用于“Verbum”。

另外，我建议更改fadein函数的名称，或者将要淡出的元素作为参数传递。否则，您的代码将简单地运行最后一个淡入淡出函数，并且“忘记”或“Verbum”将正常工作，而另一个则不会。