setInterval 和setTimeout 清空定时器,返回值,赋值为null的区别

说到定时器,很多人都不陌生,觉得这个有什么说的,很简单的了,其实你真正的理解了它了吗? 定时器的返回值是什么?clearInterval和 null有什么区别,可能有些干了几年的都不知道,下面我以setInterval为例来依次说下:

1.定时器的返回值
定时器是有返回值得,返回值代表着是第几个定时器,类型是number类型,也可以用来取消定时器,它是定时器的唯一标识符。

 var num = 1;function fn() {var timer = setInterval(function () {console.log(num);console.log(timer)}, 1000);};fn();//1,1

timer的值一定是1,number类型,因为一直是这个定时器在不断的执行所以它的返回值始终是1,返回值的作用就是作为一个引用,指向setInterval,我们也可以用它来清楚定时器 clearInterval(timer)。再看下面代码,内容不变,只加了一个调用。

var num = 1;function fn() {var timer = setInterval(function () {console.log(num);console.log(timer)}, 1000);};fn();//1,1fn();//1,2

因为再一次调用了,出现了第2个定时器,所以当第2次调用时,timer的值变成了2,当然清除定时器你也可以直接用clearInterval(2);现在你知道定时器的返回值是什么了吧?返回值是一个数字,代表当前是第几个定时器而已。

2.定时器赋值为null和清除定时器不是同一个概念

很多人可能会误认为定时器复制为null就等于清楚了定时器,这个是个错误的理解。上面说了 timer只不过是setInterval的一个引用而已,你赋值timer为null,只不过是清除了timer这个变量,清除了timer的内存占用,setInterval还是存在的。看下面的代码:

var num = 1;
function fn() {var timer = setInterval(function () {console.log(num);timer = null;console.log(timer);}, 1000);
};
fn();//1,null 1,null 1,null .....

赋值了timer为null 但是还是一直输出1,就说明定时器更本没有清除。清除定时器只能用clearInterval(timer)。

var num = 1;
function fn() {var timer = setInterval(function () {console.log(num);console.log(timer);clearInterval(timer);}, 1000);
};
fn();//1,1

这样就只输出一次1,1,因为后面清除了定时器。在页面创建了大量的自定义对象,但是调用后内存无法释放,即使刷新或跳到其它页面,内存仍然没有清空,只有关闭浏览器,内存才释放,长时间使用系统会造成客户端报“虚拟内存不足,所以很多人会清除了定时器再赋值null可以释放内存占用。

var num = 1;function fn() {var timer = setInterval(function () {console.log(num);clearInterval(timer);timer =null;}, 1000);};fn();//1

3.关于定时器参数问题

相信很多人觉得定时器就2个参数,第一个是个function函数,第二个是个延时时间,这个是我们平时用的最多的。其实并不是这样的,我拿setTimeout为例来说下:

1.第一个参数函数,第二个参数为delay时间

 var num = 1;function fn() {var timer = setTimeout(function () {console.log(num);}, 1000);};fn();//1

因为 num变量再定时器函数中没有,它会向父级寻找所以num =1;其实我们可以传递参数的。

2.第一个参数函数,第二个参数为delay时间,第三个参数为传递的参数

var num = 1;function fn() {var timer = setTimeout(function (num) {console.log(num);}, 1000,'我是传递的参数');};
fn();//我是传递的参数

因为我往定时器函数中传递了参数,所以打印出来的值是我传递的参数值。其实第一个参数可以不是函数,可以是字符串。

2.第一个参数字符串,第二个参数为delay时间(使用该语法是不推荐的, 原因和使用 eval()一样,有安全风险)

var num = 1;
function fn() {var timer = setTimeout('console.log(num)', 1000);
};
fn();//1

其实它是能解析字符串,包括字符串函数,这里不能叫函数,只是写法有点区别

var num = 1;
var string = 'function (){console.log(num)}';
function fn() {var timer = setInterval('('+string+')'+"();",1000);
};
fn();

定时器里面的函数有2种写法,上面string函数(不是字符串)为例子,一种就是setInterval(string,1000);它会自己调用,还有一种就是setInterval(‘string()’,1000)

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

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

相关文章

监视窗口中调试

VS在调试状态下 直接把要调试的变量拉到监视窗口中 查看变量值的变化转载于:https://www.cnblogs.com/xjt360/p/3989469.html

CSS之Responsive设计的关键三步

下面我们就通过这篇教程,帮助大家从三个步骤来了解和学习“Responsive”设计 第一步:Meta标签 大家都知道,现在智能手机上浏览web页面会让页面适应屏幕的大小,显示在屏幕上。不过我们可以通过“meta”标签对他进行重置&#xff…

三招快速重新打开被关闭的Chrome标签页

在 Chrome 这样的多标签页浏览器中,不小心关闭一个标签页实在是太常见的事情了。当这种情况发生时,我们有三个办法可以重新打开这个刚刚关闭的页面。 1,打开一个新的标签页,在新标签页页面最下方会有一行 Recently closed 最近关闭…

document.compatMode的CSS1compat

document.compatMode BackCompat:标准兼容模式关闭。浏览器宽度:document.body.clientWidth; CSS1Compat:标准兼容模式开启。 浏览器宽度:document.documentElement.clientWidth。 var d document,dd d.documentElement,db d.body,dc …

JS获取当前对象大小以及屏幕分辨率等

这些天用JS调界面,就在网络上搜索了一些关于获取当前窗口对象大小的写法.记录一下~ JS获取大小各参数<script>function getInfo(){var s ""; s " 网页可见区域宽&#xff1a;" document.body.clientWidth; s " 网页可见区域高&#xf…

有了JSON.stringify(),处理json将变得更简单!!

之前处理json 需要拼接json字符串&#xff0c;但是&#xff0c;如果用上JSON.stringify()的话&#xff0c;忘了json语法以没关系了.....1 {2 ViewBag.Title "GetStr";3 }4 5 <html>6 <head>7 <title> </title>8 &l…

CSS之七个高度有效的媒体查询技巧

我们都知道&#xff0c;Media Queries是实现响应式设计的秘密武器。在这篇文章中&#xff0c;将向大家介绍制定高质量的Media Queries需要注意的一些事项 1. 让内容确定断点 很多时候&#xff0c;在响应式设计中&#xff0c;你经常看到的断点值是&#xff1a;320px、480px、7…

vue项目使用.env文件配置全局环境变量

关于文件名&#xff1a;必须以如下方式命名&#xff0c;不要乱起名&#xff0c;也无需专门手动控制加载哪个文件 .env 全局默认配置文件&#xff0c;不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 关于文件内容&a…

[转]C# WInForm 无框窗体移动

本文转自&#xff1a;http://hi.baidu.com/yore2003/blog/item/f385df22377156f5d6cae239.html调用APIusing System.Runtime.InteropServices; [DllImport("user32.dll")] public static extern bool ReleaseCapture(); [DllImport("user32.dll"…

在HTML网页中使用ActiveX控件

From: http://blog.163.com/haizai219126/blog/static/4441255520097264447968/ 1. 摘要&#xff1a; 在企业应用中&#xff0c;为了实现一些特殊的功能&#xff0c;如播放自有协议的视频&#xff0c;我们需要在传统的HTML网页中插入ActiveX控件&#xff0c;由ActiveX控件来满足…

Oracle 安装 检查操作系统版本 必须是 5.0 5.1 的解决办法

打开 oraparam.ini文件 添加红色部分 Windows5.1,5.2,6.1 最下面添加 [Windows-6.1-required]#Minimum display colours for OUI to runMIN_DISPLAY_COLORS256#Minimum CPU speed required for OUI#CPU300转载于:https://www.cnblogs.com/lvlv/p/3997987.html

CSS之深入理解 flex 布局以及计算

起因&#xff1a;对于Flex布局&#xff0c;阅读了大漠老师和其他老师写的文章后&#xff0c;我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下&#xff0c;我去查阅Flexbox 的 W3C 规范文档 1. 对于flex盒模型的设计期望&#xff1a…

怎么把OCX打包成cab文件

From: http://blog.csdn.net/ghlfllz/article/details/5931402 生成TesterOCX.inf&#xff0c;输入如下内容&#xff1a; [version] signature"$CHICAGO$" AdvancedINF2.0 [Add.Code] TesterOCX.ocxTesterOCX.ocx [TesterOCX.ocx] file-win32-x86thiscab clsid{FED70…

IBM副总裁自述的数据中心简化经验

2008年11月19日&#xff0c;IBM在北京隆重举行了以“开启企业基础架构创新之旅&#xff0c;体验全新企业级数据中心”为主题的IBM 2008企业基础架构创新峰会。51CTO.com记者程鸿应邀参加了此次峰会。在此次峰会上&#xff0c;IBM全新企业级数据中心副总裁Elaine Lennox女士、IB…

vue中有关.env;.env.development,.env.production的相关介绍

1&#xff0c;关于文件名&#xff1a;必须以如下方式命名&#xff0c;不要乱起名&#xff0c;也无需专门手动控制加载哪个文件 .env 全局默认配置文件&#xff0c;不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 2…

Shell编程入门(第二版)(中)

变量测试语句-test作用&#xff1a;用来测试变量是否相等&#xff0c;是否为空&#xff0c;文件类型等。格式&#xff1a;test 测试条件 或 [] #范围&#xff1a;整数&#xff0c;字符串&#xff0c;文件 1&#xff09;整数测试: test int1 -eq int2 测试整数是否相等 test i…

CSS之中间固定两边自适应宽度

第一种&#xff1a;浮动布局实现 HTML&#xff1a; 这种方法我利用的就是浮动原理&#xff0c;左右定宽度分别进行左浮动和右浮动&#xff0c;此时主内容列&#xff08;中间列没有定度&#xff09;主会自动插入到左右两列的中间&#xff0c;最要注意的一点是&#xff0c;中间列…