setTimeout(methodName, interval); //间隔时间单位为毫秒，表示interval毫秒后执行方法methodName

setInterval(methodName, interval); //间隔时间单位为毫秒，表示每隔interval毫秒执行后都会执行一次方法methodName

执行的方法可以带参数，但是参数只能是字符串、数字类的，不能是对象

实例代码：

 <html>

     <head>

         <title>标题</title>

         <meta charset="utf8"/>

         <script type="text/javascript">

             //测试setTimeout

             var runTimeout, runInteval;

             function TestTimeout(idName){

                 if (!idName) idName = "showInfo";

                 document.getElementById(idName).innerText = (new Date()) + ", runTimeout = " + runTimeout;

                 runTimeout = setTimeout("TestTimeout('showInfo')", 1000); //一秒后执行

                 //或者写作：runTimeout = setTimeout(TestTimeout, 1000); //一秒后执行

             }

             function TestClearTimeout(){

                 clearTimeout(runTimeout);

                 runTimeout = null;

                 document.getElementById("showInfo").innerText = "setTimeout()停止了,  runTimeout = " + runTimeout;

             }

             //测试setInterval

             function ChangeTime(idName){

                 document.getElementById(idName).innerText = (new Date()) + ", runInteval = " + runInteval + ", runTimeout = " + runTimeout;

             }

             function TestInterval(){

                 if (runInteval){

                     return;

                 }

                 runInteval = setInterval("ChangeTime('showInfo2')", 1000); //每过一秒就调用ChangeTime()方法

                 //或者写作：runInteval = setInterval(ChangeTime, 1000);//需要带参数的话就用上面那种写法

             }

             //停止setInterval

             function TestClearInterval(){

                 clearInterval(runInteval);

                 runInteval = null;

                 document.getElementById("showInfo2").innerText = "setInterval()停止了,  runInteval = " + runInteval;

             }

         </script>

     </head>

     <body>

         <h3 id="showInfo"></h3>

         <h3 id="showInfo2"></h3>

         <input type="button" value="测试timeout" onclick="TestTimeout()"/>

         <input type="button" value="停止timeout" onclick="TestClearTimeout()"/>

         <input type="button" value="测试interval" onclick="TestInterval()"/>

         <input type="button" value="停止interval" onclick="TestClearInterval()" />

     </body>

 </html>

setTimeout和setInterval的更多相关文章

  1. 深入理解定时器系列第一篇——理解setTimeout和setInterval

    × 目录 [1]setTimeout [2]setInterval [3]运行机制[4]作用[5]应用 前面的话 很长时间以来,定时器一直是javascript动画的核心技术.但是,关于定时器,人们通 ...

  2. 前端开发：setTimeout与setInterval 定时器与异步循环数组

    前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...

  3. setTimeout和setInterval从入门到精通

    我们在日常web前端开发中,经常需要用到定时器方法. 前端中的定时器方法是浏览器提供的,并不是ECMAScript规范中的.是window对象的方法. 浏览器中的定时器有两种, 一种是每间隔一定时间执 ...

  4. setTimeout和setInterval定时器使用详解测试

    var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...

  5. setTimeout，setInterval原理

    function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...

  6. Javascript的setTimeOut()和setInterval()的定时器用法

    Javascript用来处理延时和定时任务的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请 ...

  7. setTimeout和setInterval的注意事项

    精准问题 setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过 ...

  8. setTimeout和setInterval的区别以及如何写出效率高的倒计时

    1.setTimeout和setInterval都属于js中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直 ...

  9. setTimeout()与setInterval()

    一.setTimeout与setInterval的用法(http://www.css88.com/archives/5804) setTimeout是超时调用,javascript是一个单线程的解析器 ...

  10. setTimeout 和 setInterval

    设置定时器,在一段时间之后执行指定的代码,setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一: window.setTimeout(" ...

随机推荐

  1. 打开IE错误解决方法

    1. 502.1 Internal Server Error Handle svc-Integraged has a bad module ManagedPipelineHandle解决方法:此种情况 ...

  2. 打开Windows10网络发现或是文件打印共享

    新安装的Windows10,已经设置好的目录共享,用户说访问不了.就连管理员的权限使用盘符加"$"也无法访问.原来Windows10默认情况之下,是把网络发现以及文件打印共享关闭的 ...

  3. 硬链接 and 软链接

    硬链接 软链接

  4. iOS阶段学习第31天笔记(UINavigationBar介绍)

    iOS学习(UI)知识点整理 一.UINavigationBar 的介绍 1)概念:UINavigationBar 是用于定义导航栏按钮的一个类对象 2)在使用UINavigationBar之前必须先 ...

  5. 第 29 章 CSS3 弹性伸缩布局[下]

    学习要点: 1.新版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一．新版本 新版本的 Flexbox 模型是 201 ...

  6. ThinkCMF变量输出+使用函数

    ThinkCMF变量输出+使用函数的方式同ThinkPHP. ThinkPHP变量输出: 在模板中输出变量的方法很简单,例如,在控制器中我们给模板变量赋值: $name = 'ThinkPHP'; $ ...

  7. hash简单介绍

    hash也称"散列", 是一种基于映射关系的存储方式,将任意长度的二进制值输出为固定长度的较小的二进制值,这种输出的小的固定长度的值为hash值: 1. 散列技术是在关键字key与 ...

  8. Web Service代理类生成工具

    本文原文连接:http://www.cnblogs.com/dengxinglin/p/3334158.html 之前一篇文章写 Web Service服务代理类生成及编译 , 通过命令行的方式可以直 ...

  9. Asp.net 实现Session分布式储存(Redis,Mongodb,Mysql等) sessionState Custom

    对于asp.net 程序员来说,Session的存储方式有InProc.StateServer.SQLServer和Custom,但是Custom确很少有人提及.但Custom确实最好用,目前最实用和 ...

  10. 02Mybatis_原生态jdbc编程中的问题总结——从而引生出为什么要用Mybatis

    我们先用jdbc去编写一个例子: 第一步:建表 /* SQLyog v10.2 MySQL - 5.1.72-community : Database - mybatis ************** ...