Question

所以我有一个有效的动画 - showAlert在身体onload中调用。现在我想使用setTimeout将动画延迟一段时间（代码片段中的1秒）。

我在正文delayShow()中致电onload。

function delayShow() {
    var runOnce = setTimeout(showAlert, 1000);
}

function showAlert() {
    var e = window.event;
    var element = e.target;

    var alert = document.getElementById("hide-navigation-instruction");

    var opacity = 0.0;

    function fadeIn() {
        opacity += 0.03;

        alert.style.opacity = opacity;

        if (opacity >= 1){
            clearInterval(id);
        }
    }

    var id = setInterval(fadeIn, 5);
}

代码不起作用。如果我将setTimeout更改为setTimeout(function(){alert("hello")}, 1000)，则会有效。

我可以做些什么来设置延迟？

Answer 1

不确定为什么你有这些行

var e = window.event;
var element = e.target;

这不是使用事件的方式。要么对这个主题做进一步的研究，要么就你想要使用它们的上下文中的事件询问一个特定的新问题。

上面两行产生错误。在浏览器中查找开发人员工具选项将允许您打开控制台，该控制台将显示错误。

以下代码有效，尽管setInterval中的5毫秒延迟太快而不能显示为淡入。

function delayShow() {
    /*added line below to ensure hide-navigation-instruction is hidden
      at start. You may have already set this within css style */
    document.getElementById("hide-navigation-instruction").style.opacity=0;
    var runOnce = setTimeout(showAlert, 1000);

}

function showAlert() {

    var alert = document.getElementById("hide-navigation-instruction");

    var opacity = 0.0;

    function fadeIn() {
        opacity += 0.03;

        alert.style.opacity = opacity;

        if (opacity >= 1){
            clearInterval(id);
        }
    }

    var id = setInterval(fadeIn, 5);
}

Javascript使用setTimeout延迟使用SetInterval的函数

1 个答案: