Javascript延迟setTimeout使用SetInterval函数

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; 

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

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

下面的代码工作虽然5毫秒的setInterval延迟太快是明显的，如褪色。

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); 
}