JS中的间歇(周期)调用setInterval()与超时(延迟)调用setTimeout()相关总结

超时调用需要使用window.setTimeout(code,millisec)方法

它接受两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒)。其中第一个参数可以是一个包含JS代码的字符串(就和在eval()函数中使用的字符串一样),也可以是一个函数。第二个参数表示等待多长时间的毫秒数,但经过该事件后指定的代码不一定会执行

这是因为JS是一个单线程序的解释器,一定时间内只能执行一段代码,为了控制要执行的代码就有一个JS任务队列,这些任务会按照将他们添加到队列的顺序执行。

setTimeout()的第二个参数告诉JS再过多长时间把当前任务添加到队列中。若队列为空,这段添加的代码会立即执行,若不为空,就要等前面的代码执行完再执行。

//不建议传递字符串!可能会导致性能损失
setimeout("alert('hellow world!')",1000);
//推荐以匿名函数调用方式
var timeoutId = setTimeout(function(){
alert("hellow world!");      
},1000);
clearTimeout(timeoutId);

  调用setTimeout()之后,该方法会返回一个数值ID,ID是计划执行代码的唯一标示符,可以通过clearTimeout(ID)来取消未执行的超时调用.

setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

间歇调用的方法是setInterval(),接受的第一个参数是要调用的函数或要执行的代码串。,第二个参数是周期性执行或调用 code 之间的时间间隔,以毫秒计。

调用setInterval()方法同样会返回一个ID,该ID可用于在将来某个时刻取消间歇调用。取消间歇调用的重要性要远远高于取消超时调用,因为在不加干涉的情况下,间歇调用将会一直执行到页面卸载。

var num = 0,
max = 10,
intervalId = null;
function incrementNumber(){
num  ;
if(num = = max){
clearInterval(intervalId);
alert("Done");
}
}
//以函数名调用方式
intervalId = setInterval(incrementNumber,500);

  在开发环境中,很少使用真正的间歇调用,原因是后一个调用可能会在前一个调用结束之前启动(设置的周期时间millisec过短或函数代码code执行时间过长),所以最好不要使用间歇调用。

问题: JavaScript中setInterval传参常见的问题(setInterval第一个参数加引号与不加引号区别)

function fun() {
console.log("1");
}
setInterval("fun()",1000);//全局作用域下正常执行
setInterval(fun(),1000); //调用函数正常,setInterval调用出错
setInterval(fun,1000);  //正确
setInterval(function(){ //匿名函数调用
console.log("1");
})

如例子中所示,setInterval 第一个参数 可以是函数名、匿名函数、函数的引用以及其他可执行代码。

setInterval("fun()",1000)

这种加引号的方式就可以理解为 可执行代码  就行eval() 一样去执行第一个参数,就是对fun方法的调用 理所当然的弹出 1  一秒钟间隔,一直执行。

setInterval(fun(),1000)

fun() 是对函数的直接调用,也就是说当setInterval还没有开始函数fun就执行了。如果这个函数没有返回值或者返回值不是可执行的函数或者其他的代码的话,就以上代码而言只是弹出一个1之后就停止了,这种方法无意义。

setInterval(fun,1000)

此时setInterval的第一个参数fun看作参数为 函数名或函数的引用。

我个人认为更推荐以匿名函数的方式调用最好。


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363140.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

损失函数_分类

通常机器学习每一个算法中都会有一个目标函数,算法的求解过程是通过对这个目标函数优化的过程。 在分类或者回归问题中,通常使用损失函数(代价函数)作为其目标函数。 损失函数用来评价模型的预测值和真实值不一样的程度&#xff0…

首页回顾功能

公司要弄一个首页回顾的功能,可以查看以往某个时间的首页。程序每天自动在上午和下午分别抓取一个页面,生成地址为http://xxx.com/review/channel20090715am.html 的形式。 这个功能用到了jQuery UI 的 datepicker日历插件,但是主要的还是通过…

多表关联更新字段

update jdjc_cy gset g.ypmc(select w.cymc from jdjc_spjdcy w where w.cydzjg.zj) where g.cydh020-JLSP14001转载于:https://www.cnblogs.com/zhuyeshen/p/10685220.html

使对易失性字段的操作原子化

总览 易失字段的预期行为是,它们在多线程应用程序中的行为应与在单线程应用程序中的行为相同。 禁止它们表现相同的方式,但不能保证它们表现相同的方式。 Java 5.0中的解决方案是使用AtomicXxxx类,但是这些类在内存(它们添加标头…

浏览器内核总结

一般来讲,浏览器分为外壳部分和渲染部分。外壳部分就是用户看得见摸得到的外观和操作界面;而渲染部分则包括了浏览器内核和JS引擎,其中JS引擎主要负责执行javascript语言实现网页上的动作,而内核则负责渲染网页,把数据变成用户可以…

SDHelper module加密系统解密

电脑上运行了SDHelper module,文档修改就会被加密,无法在别的电脑打开,工作中无意中发现的方法可以避开加密 1:可以通过打开文档并登录你的office,生成分享链接出去可以避免加密 2:本地起一个vue的项目&…

nehe教程混合这一节需要注意的两个地方

//glDepthFunc(GL_LESS); //glEnable(GL_DEPTH_TEST);///关掉深度测试,否则没效果,原因是后画的物体通不过测试,当然也就不能混合了 glDepthRange(0.0, 1.0); glClearDepth(1.0); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glClearColor(0.0, 0.0, 0.0, …

Kubernetes CRD开发模式及源码实现深入剖析-Kubernetes商业环境实战

专注于大数据及容器云核心技术解密,可提供全栈的大数据云原生平台咨询方案,请持续关注本套博客。如有任何学术交流,可随时联系。留言请关注《数据云技术社区》公众号。 1 CRD资源扩展 CRD 即CustomResourceDefinition,是 kubernet…

禁止浏览器缓存

近期在改页面的时候看到了页面中有response.setHeader("Pragma","No-cache"); 这样的语句,不知道是做什么的,经查得知原来是禁止浏览器缓存的,现把Html,Asp,Php,Jsp4种语言禁止浏览器缓…

Spring @Transactional实际如何工作?

在本文中,我们将深入探讨Spring事务管理。 我们将讨论Transactional在Transactional如何真正工作。 其他即将发布的帖子将包括: 如何使用传播和隔离等功能 主要陷阱是什么以及如何避免它们 JPA和事务管理 重要的是要注意,JPA本身不提供任何…

python3-开发进阶-RESTful 软件架构风格

一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移”REST从资源的角度类审视整个网络,它将分布在网络中某个节点的资源通过URL进行标识&#x…

mysql卸载重装总是卡在starting server这一选项

因为自己不小心把msyql给下载了,重装了一个5.7版本的可是在安装时卡在starting server这一部分,运行不下去。重写卸载重装仍然不成功,还是卡在starting server.无法继续下面的安装,查看日志也没有报错信息。 问题分析:…

两款开源Web功能测试工具

参考自:http://www.ibm.com/developerworks/cn/web/wa-aj-testing/twill:官网:http://twill.idyll.org/安装:easy_install twill运行:twill-sh文档:http://twill.idyll.org/windmill安装:easy_install wind…

箭头函数与普通函数的区别

箭头函数: let fun () > {console.log(lalalala); } 普通函数: function fun() {console.log(lalla); } 箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,连{ ... }和return…

前端基础-HTML标记语言

阅读目录 一、 HTML标签与文档结构二、 HTML标签详细语法与注意点三、 HTML中标签分类四、 HTML注释 一、 HTML标签与文档结构 HTML作为一门标记语言,是通过各种各样的标签来标记网页内容的。我们学习HTML主要就是学习的HTML标签。 那什么是标签呢? #…

cf1199解题报告

目录 cf1199解题报告ABCDEFcf1199解题报告 发一波水题。 A 模拟 #include <bits/stdc.h> #define ll long long using namespace std; const int _1e67; int n,x,y,a[_]; int main() {scanf("%d%d%d",&n,&x,&y);for(int i1;i<n;i) scanf("…

带有Gradle的Docker容器分为4个步骤

您是否需要通过Java Web应用程序创建Docker映像&#xff1f; 您在使用Gradle吗&#xff1f; 如果是这样&#xff0c;那么您距Docker nivana仅4步之遥。 对于此示例&#xff0c;我将使用一个简单的Spring Boot应用程序。 您可以在我的名为galoshe的Github存储库中找到所有源代码…

ImagesSprite V1.1.1 Beta发布

ImagesSprite v 1.1 发布后有网友提出样式显示了&#xff0c;但不能复制&#xff0c;现做调整如下&#xff08;20090804&#xff09;&#xff1a; 1.修正主界面下方css样式不能复制。 2.修正生成时透明色没有保存。【下载ImagesSprite V1.1.1 Beta】- 点击:4次转载于:https://w…

使用Spark构建简单的RESTful API

免责声明 &#xff1a;这篇文章是关于名为Spark的Java微型Web框架的&#xff0c;而不是关于数据处理引擎Apache Spark的 。 在此博客文章中&#xff0c;我们将看到如何使用Spark构建简单的Web服务。 如免责声明中所述&#xff0c;Spark是受Ruby框架Sinatra启发的Java微型Web框…

cf1206解题报告

目录 cf1206解题报告ABCDE&#xff0c;Fcf1206解题报告 A 模拟 #include <bits/stdc.h> using namespace std; int n,m,a[1010],b[12910]; int dsr[1111]; int main() {scanf("%d",&n);for(int i1;i<n;i) scanf("%d",&a[i]),dsr[a[i]]1;s…