博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js setTimeout 与 setInterval 以及 for 循环 刷新UI
阅读量:5977 次
发布时间:2019-06-20

本文共 1097 字,大约阅读时间需要 3 分钟。

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

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

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

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

 

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

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

示例:

二:扩展

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

 

转载地址:http://nusox.baihongyu.com/

你可能感兴趣的文章
Linux中grep命令的12个实践例子
查看>>
使用Docker Compose部署基于Sentinel的高可用Redis集群
查看>>
Mybatis 3学习笔记(一)
查看>>
MySQL · 引擎特性 · InnoDB COUNT(*) 优化(?)
查看>>
Guice系列之用户指南(十)
查看>>
树与森林的存储、遍历和树与森林的转换
查看>>
mongodb的读写分离
查看>>
Android自定义属性
查看>>
介绍几个好用的android自定义控件
查看>>
阿里云服务器 Windows连接不成功 提示“你的凭证不工作” 解决方法
查看>>
NVIDIA Jetson TK1学习与开发(八):图文详解OpenGL在Jetson TK1上的安装和使用
查看>>
【性能优化】直方图
查看>>
Visual C#之核心语言
查看>>
[J2ME]Nokia播放音乐时发生MediaException的解决办法
查看>>
【转】CSS 与 HTML5 响应式图片
查看>>
代码重构(五):继承关系重构规则
查看>>
redis.conf 配置档详解
查看>>
Windows App开发之集合控件与数据绑定
查看>>
五分钟创建一个自己的NPM包
查看>>
iOS多线程编程:线程同步总结 NSCondtion
查看>>