js setTimeout 与 setInterval 以及 for 循环 刷新UI
2023-09-11 14:15:06 时间
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+CSS3 360度全景图插件 - Watch3D.js
- JS框架_(JQuery.js)纯css3进度条动画
- JS框架_(JQuery.js)圆形多选菜单选项
- JS框架_(coolShow.js)图片旋转动画特效
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
- baguetteBox.js响应式画廊插件(纯JS)
- js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性
- [Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs
- fastadmin自定义js文件加载方法
- vue.js3:用exif-js读取图片的exif信息(vue@3.2.36)
- [Next.js] Hide Sensitive Information from the Consumers of Next.js API
- [Cycle.js] From toy DOM Driver to real DOM Driver
- Atitit 研发体系 codelib 代码库的建设 目录 1. 概念与组成2 1.1. Java代码2 1.2. Js代码2 1.3. H5 代码 js+css+htm+txt2 1.4.
- Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net
- Atitit.dart语言的特性 编译时js语言大总结
- three.js(JS 三维模型库)介绍和入门
- js 在for 循环内加了计数器之后的值变化
- cordova调用ios原生(js调用swift)
- js中深拷贝与浅拷贝的区别
- 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick
- JS:crypto-js模块实现数据加密解密
- js: markdown-it: Markdown解析器
- JS:crypto-js实现AES加密解密
- js实现多个异步任务的串行和并行执行(add/sum)
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
- 很easy的js双向绑定框架(二):控制器继承
- JS中arr.forEach()如何跳出循环
- js循环判断的方法
- JavaWeb——jQuery介绍,js对象和jQuery对象的转换