JavaScript "自"运行-setInertval()和setTimeout()理解
setInterval()和clearInterval()
setInterval()在JS知识导图上属于 JS的 Windows对象方法, 参考www.w3school.com.cn 与我们最常用的alert()方法是"平行"的, 由于Window对象是浏览器全局对象,所以按照JS的编程习惯,window可以不用coding
var result = "Y";
function onOk()
{
var tid = setInterval(function () {
if (result == "Y")
{
window.location.href=window.location.href;
clearInterval(tid);
}
result = "N";
}, 3000);
}
//当点击一按钮3秒后,利用setInterval()方法刷新页面
setTimeout()和clearTimeout()
<div class="divSpace" style="text-align: center;">
<input type="submit" name="ctl00$ContentPlaceHolder1$bt" value="下一步" id="ContentPlaceHolder1_bt" class="btnSubmitYellow" />
</div> <script language="javascript" type="text/javascript">
var time = 10;
var timeout = null; //用于指引自运行的function的句柄,这里是window.setTimeout(enable_button, 1000);
function enable_button() {
var bt = document.getElementById("ctl00$ContentPlaceHolder1$bt");
if (time > 0) {
bt.value = '还剩余' + time + '秒';
bt.disabled = "true";
time = time - 1;
timeout = window.setTimeout(enable_button, 1000);
}
else {
bt.value = '开始测试';
bt.disabled = "";
window.clearTimeout(timeout);
}
} function window.onload() {
enable_button();
}
</script>
//倒计时实例
setTimeout()定义
1).它属于JS原生范畴, 和JS的Window(浏览器对象)等平行,参考
2).属于JavaScript计时器,让我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
setTimeout和setInterval的区别你真的了解吗? 这篇文章以理解性翻译的形式讲解了setInterval()函数的意义,需要花些时间思考加以理解其中的意味.
Javascript程序都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把我们要执行的代码在我们设定的一个时间点插入js引擎维护的一个代码执行队列中, 时间点待插入的代码不意味着一到时间点就会被立即插入,接着立即执行的,理解这一点很重要.
function click() {
// code block1...
setTimeout(function() {
// process ...
}, 200);
// code block2
}
3).当点击click事件, JS引擎开始执行code block1,执行setTime,接着执行code block2,到200m后,准备将process插入JS执行队列,如code block2执行超过200ms,按照文章的解释, setTime是不会将process过程插入到JS执行队列,必须等到click处理结束在执行process.
4).原生的setTime是没有循环执行的"味道"的,如果需要让setTime变成循环执行,需要自递归调用.
5).原生的setInterval是有循环执行的"味道"的,即每隔多少时间间隔,会将执行代码插入JS执行队列, 但是会发生会插入执行被打断的情况,在setTime一文中给了解释.
JavaScript "自"运行-setInertval()和setTimeout()理解的更多相关文章
- javascript的运行过程以及setTimeout的运行机制
关于javascript的运行机制大家都应该有所了解了吧,其实javascript是一个单线程的机制,但是因为队列的关系它的表现会让我们感觉是一个多线程的错觉.javascript在运行的时候是这样的 ...
- JavaScript自运行函数(function(){})()的理解
今天打开JQuery源文件(jquery-1.8.3), 看到JQuery的初始化过程是这样的 (function( window, undefined ) { // .... })( window ...
- JavaScript运行机制与setTimeout
前段时间,老板交给了我一个任务:通过setTimeout来延后网站某些复杂资源的请求.正好借此机会,将JavaScript运行机制和setTimeout重新认真思考一遍,并将我对它们的理解整理如下. ...
- 理解JavaScript的运行
JavaScript可以运行在head和body标签中! HTML的脚本必须放在<script></script>标签中间! 浏览器会解释并执行位于script标签中的脚本! ...
- 简述JavaScript的运行机制
想要理解JavaScript的运行机制,需要分别深刻理解以下几个点: · JavaScript的单线程机制 · 任务队列(同步任务和异步任务) · 事件和回调函数 · 定时器 · Event Loop ...
- javascript引擎执行的过程的理解--执行阶段
一.概述 同步更新sau交流学习社区(nodeJSBlog):javascript引擎执行的过程的理解--执行阶段 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍 ...
- 浅谈javascript的运行机制
积累一下这几天学的,记录一下: 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程 ...
- 《Secrets of the JavaScript Ninja》:JavaScript 之运行时代码
最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...
- js对象详解(JavaScript对象深度剖析,深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
随机推荐
- Win10 VC++6 无法启动此程序,因为计算机中丢失mfc42d.dll 需要提升
亲测可用 1.无法启动此程序,因为计算机中丢失mfc42d.dll 我也遇到了这个问题,并且顺利解决了!按一下流程搞定的: “工程-设置-常规-microsoft基础类,(选择使用MFC作为静态链接库 ...
- Autofac手动注入及自动注入示例
参考:http://www.cnblogs.com/xinchuang/archive/2013/05/07/3065433.html#2911661 一.环境 vs2012.mvc4..Net Fr ...
- testng 6.8.6 eclipse plugin
http://files.cnblogs.com/mikelij/testng.zip
- 如何通过ShadowSocket自动更新Chrome
经常收到Chrome的更新提示,并下载更新程序后,报无法连接网络,然后更新不能了, 经过一段时间的搜索,找到了一条比较好的方法,分享一下: 1. 本机打开ShadowSocket 2. 打开Privo ...
- md5和SHA校验码
md5已经不安全了,中国山东大学女学霸王小云破解了一系列密码,当真是巾帼不让须眉.说是破解,其实就是给你一个md5码,让你求出这个md5码所对应的原始信息,显然一个md5对应无数种原始信息.而md5的 ...
- springMVC Aspect AOP 接口耗时统计
在接口开发中,我们通常需要统计接口耗时,为后续接口性能做统计.在springMVC中可以用它的aop来记录日志. 1.在spring配置文件中开启AOP <!--*************** ...
- php面向对象编程(三)
<? class Person { // 下面是人的成员属性 var $name; // 人的名子 var $sex; // 人的性别 var $age; // 人的年龄 // 定义一个构造方法 ...
- 使用antd UI 制作菜单
antd 主页地址:https://ant.design/docs/react/introduce 在使用过程中,不能照搬antd的组件代码,因为有些并不合适.首先,菜单并没有做跳转功能,仅仅是菜单, ...
- oracle误删表解决方案
·delete(删除一条记录)·drop或truncate删除表格中数据 1.delete误删除的解决方法原理:利用oracle提供的闪回方法,如果在删除数据后还没做大量的操作(只要保证被删除数据的块 ...
- 理解javascript this指向
匿名函数中的this指向window对象 这句话很经典: 每个函数在调用时,其活动对象都会自动获取两个特殊的变量:this和arguments.内部函数在搜索这两个变量时,只会搜到其活动对象为止,因此 ...