zoukankan      html  css  js  c++  java

  • web 开发之js---js 中的定时器setTimeout（function，time），setinterval（function，time）

    ####10秒自动跳转

    Html代码  收藏代码
    1. <div class="jf_register">  
    2.     <h2>您好，欢迎光临<fmt:message key="b2cShowName"/>！<a class="blue" href="<%=path%>/LoginRegist_turnToLogin">请登录</a></h2>  
    3. </div>  
    4. <div class="jf_register_banner">注册成功</div>  
    5. <div class="jf_password">  
    6. <ul>  
    7. <li> 感谢您选择<fmt:message key="b2cShowName"/>，</li><li>您的账号<span>  
    8. <font color=red><strong>${param.bussinessId}</strong></font></span>已经注册成功。 </li>  
    9. <li>系统将会在<strong id="endtime"></strong>秒后跳转到登录页！  
    10. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
    11. <a class="blue" href="<%=path%>/LoginRegist_turnToLogin">直接登录</a></li>  
    12. </ul>  
    13. </div>  
    14. <div class="jf_loginfooter"><fmt:message key="copyright"/>&nbsp;版权所有&nbsp;|   
    15. <a href="Login_loginHelpTips">联系我们</a><fmt:message key="copyrightIcp"/></div>  
    16.   
    17. <script type="text/javascript">  
    18. var i = 10;  
    19. function remainTime(){  
    20.     if(i==0){  
    21.         location.href='<%=path%>';  
    22.     }  
    23.     document.getElementById('endtime').innerHTML=i--;  
    24.     setTimeout("remainTime()",1000);  
    25. }  
    26. remainTime();  
    27. </script>  

    setInterval()循环执行相应的方法

     <script type="text/javascript">
          setInterval("myInterval()",1000);//1000为1秒钟

           function myInterval()
           {
                alert('aaaaaaaaa');
            }
     </script>

    1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
    setTimeout("",time) 设置一个超时对象

    2.setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
    setInterval("",time) 设置一个超时对象

    SetInterval为自动重复，setTimeout不会重复。

    3.1clearTimeout(对象) 清除已设置的setTimeout对象
    3.2clearInterval(对象) 清除已设置的setInterval对象

    4.1 我在项目中这样使用setTimeout () ：

    Js代码  收藏代码
    1. <!-- 系统公告紧急弹窗 -->  
    2. <script type="text/javascript" src="<%=path%>/js/jquery-1.4.4.min.js"></script>  
    3. <script type="text/javascript" src="<%=path%>/js/artDialog/artDialog.min.js"></script>      
    4. <script type="text/javascript">  
    5.     function querySystemNotice()  
    6.     {  
    7.         $.post( 'bussinessNotice_querySystemNotice', {},   
    8.                 function(returnedData,status)  
    9.                 {  
    10.                     if( returnedData!= null && returnedData!='' )  
    11.                     {  
    12.                         $.dialog.open('<%=path%>/  
    13.                                 bussinessNotice_bussinessNoticedetail?noticeNum='+returnedData,{  
    14.                             window:'top',  
    15.                              '800px',  
    16.                             height: '400px',  
    17.                             title:false,  
    18.                             border:false,  
    19.                             lock: true,  
    20.                             esc:false,  
    21.                             left:'center',  
    22.                             content:'',  
    23.                             yesText:'确认阅读',  
    24.                             yesFn: function(){  
    25.                                 $.post( '<%=path%>/  
    26.                                         bussinessNotice_bussinessNoticeAffirmRead?noticeNum='+returnedData,{},  
    27.                                     function(returnedData2,status)  
    28.                                     {  
    29.                                         //art.dialog.tips('已阅读！',1);  
    30.                                         window.location.reload();  
    31.                                 });  
    32.                             }  
    33.                         });  
    34.                     }  
    35.                     else  
    36.                     {  
    37.                         window.location.reload();  
    38.                     }  
    39.                 });  
    40.     }  
    41.   
    42.     setTimeout("querySystemNotice()",1000*60);//1000为1秒钟,设置为1分钟。  
    43.  </script>  

     

    4.2 我在项目中使用 setInterval()：

    Java代码  收藏代码
    1. <script type="text/javascript">  
    2.     var value = '${sessionScope.refTime}';  
    3.     setInterval("refMoney()", value);  
    4.     /*更新商户姓名、佣金额、资金额*/  
    5.     function refMoney(){  
    6.         $.ajax({  
    7.             type:'post',  
    8.             url:'Login_refMoney',  
    9.             async: false ,  
    10.             dataType:'json',  
    11.             success:function(data){  
    12.                 $("#bussinessName").html("");  
    13.                 $("#bussinessAccount").html("");  
    14.                 $("#bussinessCommission").html("");  
    15.                 $("#bussinessName").html(data.bussinessName);  
    16.                 $("#bussinessAccount").html(data.bussinessAccount);  
    17.                 $("#bussinessCommission").html(data.bussinessCommission);  
    18.             }  
    19.         });  
    20.     }  
    21.     //refMoney();  
    22.       
    23.     /*退出系统*/  
    24.     function logout(){  
    25.         if(confirm("确定退出系统吗?")) {  
    26.             window.parent.parent.location.replace("<%=path%>");  
    27.         }  
    28.     }  
    29. </script>  
    Html代码  收藏代码
    1. <div class="welcome">  
    2. 欢迎&nbsp;&nbsp;<font id="bussinessName">${user.bussinessName }</font>&nbsp;&nbsp;&nbsp;&nbsp;  
    3.                佣金额：<font id="bussinessAccount">  
    4.                <fmt:formatNumber value="${user.bussinessAccount }" pattern="#0.00" type="number"/>  
    5.              </font>&nbsp;&nbsp;&nbsp;&nbsp;  
    6.                资金额：<font id="bussinessCommission">  
    7.                <fmt:formatNumber value="${user.bussinessCommission }" pattern="#0.00" type="number"/>  
    8.              </font>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;  
    9.      <a href="<%=path%>/Login_loginRight" target="main" >平台首页</a>&nbsp; &nbsp;&nbsp;|&nbsp;&nbsp;   
    10.      <a href="javascript:logout();" >安全退出</a>  
    11. </div>  

     

    ================================================================================================

    5.转载内容：

    setTimeout和setInterval的使用

    这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。

    方 法

    实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。

    不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

    虽然表面上看来setTimeout只能应用在on-off方式的动作上，不过可以通过创建一个函数循环重复调用setTimeout，以实现重复的操作：

    File: settimeout_setinterval.js


    showTime();

    function showTime()

    {

    var today = new Date();

    alert( " The time is: " + today.toString());

    setTimeout( " showTime() " , 5000 );

    }

    一旦调用了这个函数，那么就会每隔5秒钟就显示一次时间。如果使用setInterval，则相应的代码如下所示：

    File: settimeout_setinterval2.js

    setInterval( " showTime() " , 5000 );

    function showTime()

    {

    var today = new Date();

    alert( " The time is: " + today.toString());

    }

    这两种方法可能看起来非常像，而且显示的结果也会很相似，不过两者的最大区别就是，setTimeout方法不会每隔5秒钟就执行一次showTime函数，它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完，那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。

    如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout。
    函数指针的使用

    两个计时函数中的第一个参数是一段代码的字符串，其实该参数也可以是一个函数指针，不过Mac下的IE 5对此不支持。

    如果用函数指针作为setTimeout和setInterval函数的第二个参数，那么它们就可以去执行一个在别处定义的函数了：

    setTimeout(showTime, 500);

    function showTime()

    {

    var today = new Date();

    alert("The time is: " + today.toString());

    }

    另外，匿名函数还可以声明为内联函数：

    setTimeout(function(){var today = new Date();

    alert("The time is: " + today.toString());}, 500);
    讨 论

    如果对计时函数不加以处理，那么setInterval将会持续执行相同的代码，一直到浏览器窗口关闭，或者用户转到了另外一个页面为止。不过还是有办法可以终止setTimeout和setInterval函数的执行。

    当setInterval调用执行完毕时，它将返回一个timer ID，将来便可以利用该值对计时器进行访问，如果将该ID传递给clearInterval，便可以终止那段被调用的过程代码的执行了，具体实现如下：

    File: settimeout_setinterval3.js (excerpt)

    var intervalProcess = setInterval( " alert('GOAL!') " , 3000 );

    var stopGoalLink = document.getElementById( " stopGoalLink " );

    attachEventListener(stopGoalLink, " click " , stopGoal, false );

    function stopGoal()

    {

    clearInterval(intervalProcess);

    }

    只要点击了stopGoalLink，不管是什么时候点击，intervalProcess都会被取消掉，以后都不会再继续反复执行intervalProcess。如果在超时时间段内就取消setTimeout，那么这种终止效果也可以在setTimeout身上实现，具体实现如下：

    File: settimeout_setinterval4.js (excerpt)

    var timeoutProcess = setTimeout( " alert('GOAL!') " , 3000 );

    var stopGoalLink = document.getElementById( " stopGoalLink " );

    attachEventListener(stopGoalLink, " click " , stopGoal, false );

    function stopGoal()
    {
    clearTimeout(timeoutProcess);
    }
    http://jun1986.iteye.com/blog/1025965
    http://www.jb51.net/article/45215.htm 定时器实例
  • 相关阅读:
    可爱的中国电信 请问我们的电脑还属于我们自己吗？
    了解客户的需求，写出的代码或许才是最优秀的............
    DELPHI DATASNAP 入门操作(3)简单的主从表的简单更新【含简单事务处理】
    用数组公式获取字符在字符串中最后出现的位置
    在ehlib的DBGridEh控件中使用过滤功能(可以不用 MemTableEh 控件 适用ehlib 5.2 ehlib 5.3)
    格式化json返回的时间
    ExtJs中使用Ajax赋值给全局变量异常解决方案
    java compiler level does not match the version of the installed java project facet (转)
    收集的资料（六）ASP.NET编程中的十大技巧
    收集的资料共享出来(五)Asp.Net 权限解决办法
  • 原文地址：https://www.cnblogs.com/pengkunfan/p/4040164.html
Copyright © 2011-2022 走看看