使用定时器实现JavaScript的延期执行或重复执行 
window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。
它们的原型如下: 
window.setTimeout(expression,milliseconds);
window.setInterval(expression,milliseconds);
其中expression可以是字符串,也可以是函数名。是字符串的时候可以带参数,函数名不能带参数,如果带上参数就直接执行函数了,不会延时。
function hello (){
console.log('I am dada');
//alert('I am ' + name);
        //setTimeout(arguments.callee,2000);   
}
setTimeout(hello,5000);//5秒后执行
setTimeout('hello()',3000);//3秒后执行
setTimeout(hello(),8000);//立刻执行

第一种情况是函数名,但是带不了参数
第二种情况是字符串,可执行的js代码,可以带参数,但是性能上比函数名差
第三种是调用函数,直接执行
所以如果想要穿参数,但是又不想通过字符串的形式调用,可以自己来写一个方法:
function _hello(_name){ 
return function(){
hello2(_name);
}
}
setTimeout(_hello(name),7000);//立刻执行

一、setTimeout

setTimeout(function(){
    //要执行的代码                    
},200);

指隔200ms后,定时器代码被添加到队列中,等待JavaScript进程空闲后,代码才执行

二、setInterval


1、上面代码是指每隔200ms就创建一个执行代码的定时器
2、当使用setInterval时,仅当(在队列中)没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中,引用JavaScript高级程序设计第二版书中语句
(即:当前一个定时器代码执行时,紧跟后面的第一个定时器代码将添加到队列中,等待执行,再后面的定时器代码不会添加到队列中)

用setInterval来执行反复的行为的时候会遇到一个问题:
当定时器代码执行时间(假如需要600ms才执行完)超过指定间隔(这里是200ms),那么某些定时器代码就会被跳过(即后面的定时器代码不会被添加到队列中),前一个定时器代码执行完毕后,队列中的定时器代码立刻执行,各定时器之间的代码执行没有间隔。这时,需要使用链式setTimeout。



这样做的好处是:前一个定时器要执行的代码执行完且等待200ms后,才创建一个新的定时器,并把定时器代码添加到队列中执行
即:不会出现定时器代码被跳过的情况;定时器之间的代码执行可以有间隔(根据自己设置)。

setTimeout(function(){
    //要执行的代码 
    setTimeout(arguments.callee,2000);                   
},2000);

setInterval(function(){
    //要执行的代码                    
},200);

javascript定时器使用的更多相关文章

  1. Javascript定时器(三)——setTimeout(func, 0)

    setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...

  2. Javascript定时器(二)——setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...

  3. JavaScript定时器详解

    假设有以下场景 setTimeout(function timeoutHandler(){ /*Some timeout handle code that runs for 6ms*/ }, 10); ...

  4. Javascript 定时器调用传递参数的方法

    文章来源:  https://m.jb51.net/article/20880.htm 备注:先记下,以后整理: Javascript 定时器调用传递参数的方法,需要的朋友可以参考下. 无论是wind ...

  5. JavaScript定时器的工作原理(翻译)

    JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...

  6. JavaScript定时器作业

    JavaScript定时器作业 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...

  7. 关于JavaScript定时器我的一些小理解

    因为自己在平时工作中,有些功能需要用到定时器,但是定时器并不像我们表边上看到的那样,所以这周末我看看书查查资料,深入研究了一下JavaScript中的定时器,那么废话不多说,下面进入我们今天的正题. ...

  8. Javascript 定时器的使用陷阱 (setInterval)

    setTimeout(function(){ // 其他代码 setTimeout(arguments.callee, interval); }, interval); setInterval会产生回 ...

  9. JavaScript定时器越走越快的问题

    目录 JavaScript定时器越走越快的问题 (setinterval)多次初始化 清除(clearInterval)的失效 解决方法 JavaScript定时器越走越快的问题 之前在项目中写了定时 ...

  10. JavaScript定时器及回调用法

    JavaScript定时器及回调用法 循环定时任务 // 假设现在有这样一个需求:我需要请求一个接口,根据返回结果判断需不需要重复请求,直到达到某一条件为止,停止请求执行某操作 <script ...

随机推荐

  1. [Python] 糗事百科文本数据的抓取

    [Python] 糗事百科文本数据的抓取 源码 https://github.com/YouXianMing/QiuShiBaiKeText import sqlite3 import time im ...

  2. RxJava2 源码解析(二)

    概述 承接上一篇RxJava2 源码解析(一),本系列我们的目的: 知道源头(Observable)是如何将数据发送出去的.    知道终点(Observer)是如何接收到数据的.    何时将源头和 ...

  3. 关于#progma comment 中库文件相对路径问题

    最近做一个验证程序的对话框编程,因为里面要要用到静态链接库,所以就稍微的学习了下静态链接库知识,学习的过程中感觉到了自己所了解的东西实在是少的可怜,更加坚定了自己要更加上进的决心,要把以前所丢掉的都给 ...

  4. 动态库DLL中类的使用

    一.DLL中类的导出 在类名称前添加 _declspec(dllexport)定义,比如: class _declspec(dllexport) CMath{ .... }; 通常使用预编译开关切换类 ...

  5. 【H5动画】谈谈canvas动画的闪烁问题

    一般来说,在H5开发中,使用canvas往往只是为了展示一些简单的图表或者简单短小的动画,很少考虑到有闪烁的问题. 最近,在手机QQ魔法表情的项目中,就遇到了奇葩的闪烁问题. 这里说的闪烁,是指动画刚 ...

  6. MongoDB中MapReduce介绍与使用

    一.简介 在用MongoDB查询返回的数据量很大的情况下,做一些比较复杂的统计和聚合操作做花费的时间很长的时候,可以用MongoDB中的MapReduce进行实现 MapReduce是个非常灵活和强大 ...

  7. 基于CentOS 搭建 Seafile 专属网盘

    系统要求:CentOS 7.2 64 位操作系统 安装 Seafile 安装依赖环境 使用 yum 安装 Python 及 MySQL: yum install python python-setup ...

  8. 安装nginx和添加ssl证书

    一. 准备: 1. 需要有一台centos的服务器 2. 域名解析到服务器 3. 域名的nginx证书 二. 安装Nginx(输入下面的指令后:可访问实验机器外网 HTTP 服务http://118. ...

  9. CentOS下网卡启动、配置等ifcfg-eth0教程(转)

    步骤1.配置/etc/sysconfig/network-scripts/ifcfg-eth0 里的文件.it动力的CentOS下的ifcfg-eth0的配置详情: [root@localhost ~ ...

  10. DropDMG for Mac(dmg 文件打包工具)破解版安装

    1.软件简介    DropDMG 是 macOS 系统上的一款帮助用户快速打包 DMG 文件的 Mac 文件管理软件,DropDMG 不但可以将影像档加密.更可以配合 GZip .BZip2 .Ma ...