1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式；执行一次；

如果需要执行多次，自身再次调用 setTimeout()；

示例：无穷循环并带停止按钮的

<html>

<head>

<script type="text/javascript">

var c=0

var t

function timedCount()

{

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()",1000)

}

function stopCount()

{

clearTimeout(t)

}

</script>

</head>

<body>

<form>

<input type="button" value="开始计时！" onClick="timedCount()">

<input type="text" id="txt">

<input type="button" value="停止计时！" onClick="stopCount()">

</form>

<p>

请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。

</p>

</body>

</html>

2. setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式；

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

示例：

<html>

<body>

<input type="text" id="clock" size="35" />

<script language=javascript>

var int=self.setInterval("clock()",50)

function clock()

  {

  var t=new Date()

  document.getElementById("clock").value=t

  }

</script>

<button onclick="int=window.clearInterval(int)">Stop interval</button>

</body>

</html>

二：扩展

1. 使用 setTimeout 和 setInterval 不会阻塞js网页的单线程页面操作；比如用js 改变页面的图片或，页面上的文字；

通常使用 for 循环 会影响页面的操作；

        function test()

        {

            //假如 /tmp/ 目录下有4张图片，分别是 test0-3.png

            //如下js 改变 id为 testIMG 的图片；

            for(var i=0;i<4;i++)

            {

                alert(i);

                document.getElementById("testIMG".src="/tmp/test"+String(i)+".png";

            }

            //运行结果，在网页上，会依次弹出 4次 alert；但是图片不会依次切换，而是要等到最后一次，显示最后一张图片；

        }

所以，上面的问题要 使用 setTimeout, setInterval 操作；

2. 还有一点，js 对于 同一个 id 的 img标签；在两次改变图片时，，如果图片的名字一样，，图片不一样，，图片不会改变；

即是 第一次 js 改变图片 为 a.png;

第二次 a.png 图片发生变化了，但是名字还是 a.png；但是此时用js 改变时，页面上的图片不会刷新

参考：http://www.w3school.com.cn/jsref/met_win_settimeout.asp

http://www.w3school.com.cn/jsref/met_win_setinterval.asp

js setTimeout 与 setInterval 以及 for 循环 刷新UI的更多相关文章

  1. js setTimeout和setInterval区别

    1.区别 2.示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...

  2. js:setTimeout 与 setInterval 比较

    在javascript中有两个非常有用的函数:setTimeout 和setInterval ,都是定时器:但是两者存在着一些区别: 1. setTimeout函数 用法:setTimeout(fn, ...

  3. js setTimeout 和 setInterval 区别

    setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码.不过这两个函数还是有区别的 ...

  4. js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）

    javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...

  5. 关于js中的setTimeout和setInterval

    http://ejohn.org/blog/how-javascript-timers-work 这是John的一篇博文说到setTimeout和setInterval的区别,在看js高效图形编程的时 ...

  6. 原生js轮播以及setTimeout和setInterval的理解

    下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta c ...

  7. js中的setTimeout和setInterval

    在html页面中要使用自动刷新功能时,可以是使用js中setTimeout和setInterval: 一.使用方法 setTimeout的使用setTimeout('要调用的Js方法', 调用的延迟时 ...

  8. 【转】JS中setTimeout和setInterval的最大延时值详解

    前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...

  9. js中两种定时器，setTimeout和setInterval的区别

    setTimeout只在指定时间后执行一次,代码如下:   <script>   //定时器 异步运行   function hello(){   alert("hello&qu ...

随机推荐

  1. 编写一个JAVA小程序取得IP地址

    在TCP/IP 互联网时,经常会需要查询自己主机的IP地址和www服务器的IP地址.虽然,我们可以使用IPCONFIG 和PING 进行IP地址查询,但是如果在应用程序或APPLET中使用此命令会破坏 ...

  2. SqlSever基础 cast 将getdate返回的时间转换成字符串

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  3. 【leetcode❤python】66. Plus One

    class Solution:      # @param digits, a list of integer digits      # @return a list of integer digi ...

  4. 【leetcode❤python】232. Implement Queue using Stacks

    #-*- coding: UTF-8 -*-#双栈法class Queue(object):    def __init__(self):        """      ...

  5. which、whereis、locate、find 命令用法

    which.whereis.locate.find 命令用法   大部分转自http://312788172.iteye.com/blog/730280,有修改 我们经常在linux要查找某个文件,但 ...

  6. FreeSWITCH第三方库（视频）的简单介绍（二）

    FreeSWITCH使用了大量的第三方库,本文档主要介绍视频相关库的信息: 音频相关库的信息介绍参考:http://www.cnblogs.com/yoyotl/p/5486753.html 其他相关 ...

  7. ajax请求、servlet返回json数据

    ajax请求.servlet返回json数据 1.方式一 response.setcontenttype("text/html;charset=utf-8"); response. ...

  8. CUBRID学习笔记 7 ms常见错误

    基本不是权限问题,就是dll问题.  重新下载或应用dll注意版本. 权限的问题,先本机测试. 看看在web管理有无问题.  剩下的基本就简单了 欢迎转载 ,转载时请保留作者信息.本文版权归本人所有, ...

  9. iOS - OC NSUserDefaults 数据存储

    前言 @interface NSUserDefaults : NSObject 用来保存应用程序设置和属性.用户保存的数据.用户再次打开程序或开机后这些数据仍然存在.如果往 userDefaults ...

  10. c point

    a[i] 与 *(a+i) 是等价的. 事实上在计算a[i]的值时,c语言首先将前者转换为后者形式, 而且,通常而言,用指针编写的程序要比用数组下标编写的程序执行速度快,(为什么?) 因此,应该尽量用 ...