超时调用(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)的更多相关文章

  1. 微信小程序开发:学习笔记[7]——理解小程序的宿主环境

    微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器

  2. Spring学习笔记(七)模拟实际开发过程的调用过程XML版-Setter方式注入

    模拟实际开发过程的调用过程XML版-Setter方式注入 源码获取github [TOC] 1.项目结构 2.jar包跟上个一样 3.重写set方法 UserServiceImpl.java 1234 ...

  3. Lua学习笔记6:C++和Lua的相互调用

        曾经一直用C++写代码.话说近期刚换工作.项目组中的是cocos2dx-lua,各种被虐的非常慘啊有木有.     新建cocos2dx-lua项目.打开class能够发现,事实上就是C++项 ...

  4. Dynamic CRM 2013学习笔记(二十二)插件里调用WCF服务

      1. 添加service:     2.调用WCF BasicHttpBinding myBinding = new BasicHttpBinding(); myBinding.Name = &q ...

  5. JavaScript学习笔记(七)——函数的定义与调用

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  6. Java_JVM学习笔记(深入理解Java虚拟机)___重点

    http://chenzhou123520.iteye.com/category/196061 转载 JVM学习笔记(一):运行时数据区 JVM学习笔记(二):JVM中对象访问的两种方式 JVM学习笔 ...

  7. SNMP学习笔记之SNMP的安装及Python的调用

    0x00 概述 本文是介绍SNMP在Windows和Linux(Ubuntu)下的安装,以及通过Python调用其接口的文章. 0x01 开发环境 Python 3.5.1 Windows 10 64 ...

  8. <转>ASP.NET学习笔记之理解MVC底层运行机制

    ASP.NET MVC架构与实战系列之一:理解MVC底层运行机制 今天,我将开启一个崭新的话题:ASP.NET MVC框架的探讨.首先,我们回顾一下ASP.NET Web Form技术与ASP.NET ...

  9. SpringMVC:学习笔记(1)——理解MVC及快速入门

    SprigMVC-理解MVC及快速入门 说明: 传统MVC-->JSPModel2-->Front Controller + Application Controller + Page C ...

随机推荐

  1. ES6简介

    function fn(){ return 100; } let name='sui'; let age=19; let sui={ name, age, ["pro"+fn()] ...

  2. Linux工具之bc计算器进制的转换

    bc是Linux下的命令行式的计算器. 题目虽然叫任意进制,但是因为bc的限制,输入进制是2~16范围:输出进制是2~999范围.这与常见计算器的进制范围是一致的,比如windows计算器最高也只能处 ...

  3. thinkphp分页带数据

    因为用thinkphp做分页时候点击下一页后搜索栏的数据会清空,然后点击下一页后刷新完了就没有内容了,感觉网上查找和我自己研究在不适用ajax做分页的情况下用以下代码就可以实现!!通过把值扔地址栏来进 ...

  4. 常用http响应报文分析

    这是我在使用Asp.Net的时候,整理的的一些关于Http响应报文的分析笔记,零零散散的记录, 现在贴出来,抛砖引玉,如果有什么不对或者不严谨的地方,请各位大神不吝赐教. 一.HTTP响应码响应码由三 ...

  5. Android - 多语言自动适配

    Android为多语言适配提供了很大的方便.开发者不需要在代码中进行修改.只需要配置xml文件. res --> values 其中存放有xml文件.一般这些都是英文的字符串.我们可以存放其他语 ...

  6. Java条件查询涉及到时分秒

    关于Oralce数据库 的日期时间查询: 下面我们先来看一组日期数据 表:myDate 列:time; 1998-8-7 23:45:33.3 1998-8-7 11:22:21.5 1998-8-7 ...

  7. linux下 git 安装

    1.使用yum安装 yum -y install git yum remove git 2.源代码安装 a.下载git源码  网址为 https://github.com/git/git/releas ...

  8. guava缓存底层实现

    摘要 guava的缓存相信很多人都有用到, Cache<String, String> cache = CacheBuilder.newBuilder() .expireAfterWrit ...

  9. HTML5 开发APP(MUI的一些特性)

    先附mui文档地址:http://dev.dcloud.net.cn/mui/ui/  .mui的UI组件比较简单而且在文档中很好找就不过多说了. 1 在app开发中,使用HTML5+的api,必须m ...

  10. angularjs 选项卡tab切换(移动端用户订单状态)

    <!--头部导航tabs切换--> <div class="tabs-striped tabs-top tabs-background-positive tabs-colo ...