setTimeout与setInterval

最新推荐文章于 2025-04-17 13:43:45 发布

原创最新推荐文章于 2025-04-17 13:43:45 发布 · 379 阅读

CC 4.0 BY-SA版权

本文深入讲解了JavaScript中的定时器setInterval()和setTimeout()方法。包括它们的基本语法、使用场景及如何停止定时器的运行。同时提供了示例代码，演示如何在网页加载完成后执行特定任务。

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">  
    <title>My JSP 'windowOnLoad.jsp' starting page</title>
    <script type="text/javascript">
    // reference: <[http://blog.youkuaiyun.com/zdwzzu2006/article/details/6047632]>
    
    // html dom setInterval()方法 
    // setInterval() 方法可以按照指定的周期(以毫秒计算来调用函数或计算表达式)
    // setInterval() 方法会不停地调用函数,知道clearInterval() 被调用或窗口被关闭,
    // 由setInterval()返回的ID值可以作为clearInterval() 方法的参数
    // grammar: setInterval(code, millisec[, "lang"]);
    // 注意: setInterval() 的返回值,一个可以传递给window.clearInterval() 从而取消对code 的周期性执行的值;
    
    // setTimeout() 方法用于在指定的毫秒后调用函数或计算表达式
    // grammar: <[setTimeout(code,millisec)]>
    window.onload = function(){
          // setTimeout()
          var t=setTimeout("alert('5 seconds!')",5000);
    }
    </script>
  </head>
  
  <body>
    <input type="text" id="clock" size="35">
    <script type="text/javascript">
      var int = self.setInterval("clock()", 50);
      function clock()
      {
          // setInterval() clearInterval()
          var t = new Date();
          document.getElementById("clock").value = t;
      }
    </script>
    <button onclick="int=window.clearInterval(int)">stop_interval</button>
    
  </body>
  <script type="text/javascript">
    // 这样就可以通过js 代码直接定义这个方法,而不需要像这样定义了<body onload="javascript:a();">
    // window.onload = function() {
    // var a = document.getElementById("loading");
    // a.parentNode.removeChild(a);
    // }
    // onload方法为window对象的属性
    if (window.onload == null) {
        var a = document.getElementById("loading");
        window.onload = function(){a.style.display = 'none';}
    } else {
        eval("tempFunc =" +window.onload.toString());
        window.onload = function(){tempFunc(); a.style.display = 'none';};
    }
  </script>
</html>