【学习笔记】深入理解超时调用(setTimeout)和间歇调用(setInterval)
超时调用(setTimeout):在指定的毫秒数后调用函数或计算表达式。
setTimeout(func, 1000); // func执行的函数,1000毫秒
间歇调用(setInterval):按照指定的周期(以毫秒计)来调用函数或计算表达式
setInterval(func, 1000);
用法很简单,但是不一定好用
首先回到JavaScript本身
JavaScript是一个单线程语言,它有一个任务队列,队列里的任务按顺序执行。
打个比方,我们点击一个按钮触发一个事件,此时该事件会被添加到任务队列里边,如果当前队列是空的,那么立即执行该事件;如果不是空的,那么等前面的任务执行完了以后再执行该事件。也就是说,JS里边的代码都不是立即执行的。
其实,超时调用并不是在特定的时间之后执行代码,而是在特定的时间之后将代码添加到任务队列。间歇调用也一样,每间隔特定时间就将代码添加到任务队列。
举个例子:
btn.onclick = function () { setTimeout(延时代码, 200); // 处理代码 }
点击之后过200毫秒,延时代码进入任务队列,在这之前处理代码已经进入任务队列。
假设原任务队列是空的,且处理代码的执行事件是300毫秒,那么延时代码在点击之后过300毫秒才会执行。
间歇调用也是这个道理。因此,如果每一次的代码执行事件过长,就会出现间隔事件小于我们设置的时间的情况。平时我们没遇到这种情况,是因为代码执行时间没那么长,或者出现了这种情况,但是肉眼看不出来。
这里有一个避免setInterval()出问题的方法,那就是链式地调用setTimeout():
var interval = 200; setTimeout(function () { // 处理代码 setTimeout(arguments.callee, interval); }, interval)
这样每一个函数执行时,都会创建新的定时器。arguments.callee是对当前执行函数的引用。这种情况下,前一次处理代码执行完之后,过特定时间,下一次的处理代码才会进入任务队列。
欢迎补充或指正
【学习笔记】深入理解超时调用(setTimeout)和间歇调用(setInterval)的更多相关文章
- 微信小程序开发:学习笔记[7]——理解小程序的宿主环境
微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器
- Spring学习笔记(七)模拟实际开发过程的调用过程XML版-Setter方式注入
模拟实际开发过程的调用过程XML版-Setter方式注入 源码获取github [TOC] 1.项目结构 2.jar包跟上个一样 3.重写set方法 UserServiceImpl.java 1234 ...
- Lua学习笔记6:C++和Lua的相互调用
曾经一直用C++写代码.话说近期刚换工作.项目组中的是cocos2dx-lua,各种被虐的非常慘啊有木有. 新建cocos2dx-lua项目.打开class能够发现,事实上就是C++项 ...
- Dynamic CRM 2013学习笔记(二十二)插件里调用WCF服务
1. 添加service: 2.调用WCF BasicHttpBinding myBinding = new BasicHttpBinding(); myBinding.Name = &q ...
- JavaScript学习笔记(七)——函数的定义与调用
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
- Java_JVM学习笔记(深入理解Java虚拟机)___重点
http://chenzhou123520.iteye.com/category/196061 转载 JVM学习笔记(一):运行时数据区 JVM学习笔记(二):JVM中对象访问的两种方式 JVM学习笔 ...
- SNMP学习笔记之SNMP的安装及Python的调用
0x00 概述 本文是介绍SNMP在Windows和Linux(Ubuntu)下的安装,以及通过Python调用其接口的文章. 0x01 开发环境 Python 3.5.1 Windows 10 64 ...
- <转>ASP.NET学习笔记之理解MVC底层运行机制
ASP.NET MVC架构与实战系列之一:理解MVC底层运行机制 今天,我将开启一个崭新的话题:ASP.NET MVC框架的探讨.首先,我们回顾一下ASP.NET Web Form技术与ASP.NET ...
- SpringMVC:学习笔记(1)——理解MVC及快速入门
SprigMVC-理解MVC及快速入门 说明: 传统MVC-->JSPModel2-->Front Controller + Application Controller + Page C ...
随机推荐
- ES6简介
function fn(){ return 100; } let name='sui'; let age=19; let sui={ name, age, ["pro"+fn()] ...
- Linux工具之bc计算器进制的转换
bc是Linux下的命令行式的计算器. 题目虽然叫任意进制,但是因为bc的限制,输入进制是2~16范围:输出进制是2~999范围.这与常见计算器的进制范围是一致的,比如windows计算器最高也只能处 ...
- thinkphp分页带数据
因为用thinkphp做分页时候点击下一页后搜索栏的数据会清空,然后点击下一页后刷新完了就没有内容了,感觉网上查找和我自己研究在不适用ajax做分页的情况下用以下代码就可以实现!!通过把值扔地址栏来进 ...
- 常用http响应报文分析
这是我在使用Asp.Net的时候,整理的的一些关于Http响应报文的分析笔记,零零散散的记录, 现在贴出来,抛砖引玉,如果有什么不对或者不严谨的地方,请各位大神不吝赐教. 一.HTTP响应码响应码由三 ...
- Android - 多语言自动适配
Android为多语言适配提供了很大的方便.开发者不需要在代码中进行修改.只需要配置xml文件. res --> values 其中存放有xml文件.一般这些都是英文的字符串.我们可以存放其他语 ...
- Java条件查询涉及到时分秒
关于Oralce数据库 的日期时间查询: 下面我们先来看一组日期数据 表:myDate 列:time; 1998-8-7 23:45:33.3 1998-8-7 11:22:21.5 1998-8-7 ...
- linux下 git 安装
1.使用yum安装 yum -y install git yum remove git 2.源代码安装 a.下载git源码 网址为 https://github.com/git/git/releas ...
- guava缓存底层实现
摘要 guava的缓存相信很多人都有用到, Cache<String, String> cache = CacheBuilder.newBuilder() .expireAfterWrit ...
- HTML5 开发APP(MUI的一些特性)
先附mui文档地址:http://dev.dcloud.net.cn/mui/ui/ .mui的UI组件比较简单而且在文档中很好找就不过多说了. 1 在app开发中,使用HTML5+的api,必须m ...
- angularjs 选项卡tab切换(移动端用户订单状态)
<!--头部导航tabs切换--> <div class="tabs-striped tabs-top tabs-background-positive tabs-colo ...