浅谈JavaScript中setInterval和setTimeout的使用问题

说到setInterval，就不得不提到setTimeout，二者都是用于定时执行某函数，区别在于setTimeout 只执行一次，而setInterval可以一直连续不断执行下去，典型用法如下：

function do_sth() { console.log('Hello...'); }

setTimeout(do_sth, 2500);  // 2.5 秒后，执行 do_sth 函数（只执行一次）
setInterval(do_sth, 3500); // 3.5 秒后，执行 do_sth 函数（每隔 3.5 秒执行一次，一直执行下去）

表面看上去，二者各有各的用途，没什么问题。但是如果setInterval所执行的函数是比较耗时的动作，setInterval仍然会按照原计划安排调用那个函数，而不考虑之前的任何阻塞，这样随着时间的推移，队列中等待执行的函数就会越来越多。而对于此问题解决方案仍然是采用递归调用setTimeout 的方法，如：

function do_sth() {
 console.log('Hello...');  // 即使这里执行比较耗时的动作也没问题，
                  // 等这里执行完了才会再去调用 setTimeout

 setTimeout(do_sth, 2500); // 安排后续执行
}

do_sth();             // 初次执行

这种递归调用的方式，既可以达到循环执行某函数的目的，有可以防止后续任务不断堆积。

如果你觉得这种方式有点罗嗦，还可以再写得精炼一些：

(function() {
 console.log('Hello...');  // do something here
 setTimeout(arguments.callee, 2500);
})();

说是这么说，但是如果定时执行的任务开销很少，setInterval一般是没什么问题的，但是如果任务开销比较大，请务必使用setTimeout。

赞 (0)

相关推荐

  • JavaScript SetInterval与setTimeout使用方法详解

    setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码.不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码.区别:window.setTimeout("function",time)://设置一个超时对象,只执行一次,无周期 window.setInterva

  • js中的setInterval和setTimeout使用实例

    setInterval() 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来执行函数或表达式.该方法会不停地循环调用函数,直到使用 clearInterval() 明确停止该函数或窗口被关闭.clearInterval() 函数的参数即 setInterval() 返回的 ID 值. 语法 setInterval(code,millisec[,"lang"])code 必需.要调用的函数或要执行的代码串.millisec 必须.周期性执行或调用 code 之间

  • JavaScript setTimeout和setInterval的使用方法 说明

    不同的是setInterval会每隔指定的时间段就执行一次代码,具有重复性.而setTimeout只会调用后执行一次. 下面通过函数的建立和函的自动删除来深刻理解两个函数: 1.函数的建立 setTimeOut的建立: 复制代码 代码如下: showTime(); function showTime() { var today = new Date(); alert("The time is: " + today.toString()); setTimeout("showTi

  • 快速掌握Node.js中setTimeout和setInterval的使用方法

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInterval的使用. 一.setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法.当调用setTime()时回调函数会在delayMillSeconds后 执行

  • javascript 不停(setInterval)/延时(setTimeout)函数使用实例

    setTimeout(script,millisecond); 是从现在算起多少微秒后运行该代码(只运行一次) setInterval(script,millisecond); 是每隔多少微秒运行一次代码 示例: 1.执行一次 秒 var i = 1 ; var txt = document.getElementById( " time " ); function addT(i) { txt.innerHTML = i; } setTimeout(" addT(i++) &q

  • JS中SetTimeout和SetInterval使用初探

    JS中SetTimeout和SetInterval使用初探

    一切尽在代码截图中,愿意和大家一起成长!可以喷,毕竟是菜鸟!  好了,废话不多说了,看具体实例代码吧! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="wraper">

  • 浅谈JavaScript中setInterval和setTimeout的使用问题

    说到setInterval,就不得不提到setTimeout,二者都是用于定时执行某函数,区别在于setTimeout 只执行一次,而setInterval可以一直连续不断执行下去,典型用法如下: function do_sth() { console.log('Hello...'); } setTimeout(do_sth, 2500); // 2.5 秒后,执行 do_sth 函数(只执行一次) setInterval(do_sth, 3500); // 3.5 秒后,执行 do_sth 函

  • 浅谈JavaScript中this的指向问题

    JavaScript中this指向问题 记得初学 JavaScript 时,其中 this 的指向问题曾让我头疼不已,我还曾私自将其与闭包.原型(原型链)并称 JS 武林中的三大魔头.如果你要想在 JS 武林中称霸一方,必须将这三大魔头击倒.个人认为在这三大魔头中,this 指向问题的武功最菜(难度最低).俗话说柿子捡软的捏,那我们就先从 this 指向问题下手. 先记住攻克 this 指向问题的口诀(前辈们的总结):哪个对象调用函数,函数里的 this 就默认指向哪个对象(注意 this 只能

  • 浅谈JavaScript中的对象及Promise对象的实现

    浅谈JavaScript中的对象及Promise对象的实现

    JavaScript 中的所有事物都是对象:字符串.数值.数组.函数.下面小编给大家收集整理些javascript中的对象及promise对象的实现.具体内容如下: 到处都是对象 window对象 常用的属性和方法介绍 location 包含页面的URL,如果改变这个属性,浏览器会访问新的URL status 包含将在浏览器状态去显示的一个串.一般在浏览器左下角 onload: 包含了需要在页面完全加载后调用的函数 document: 包含DOM alert方法: 显示一个提醒 prompt方法

  • 浅谈javascript中的三种弹窗

    js中三种弹窗 1)alert 弹出警告 无返回值---------alert('第一行\n第二行'); 2)confirm()选择确定或取消,返回t或f----var result = confirm('是否删除!'); 3)prompt()弹出输入框,返回输入内容----var value = prompt('输入你的名字:', '请在这里输入名字'); 当然也可以自定义好看的样式.下面代码有问题明天再改. <script> //window.confirm //prompt window

  • 浅谈JavaScript中this的指向更改

    JS中this指向的更改 JavaScript 中 this 的指向问题前面已经总结过,但在实际开中, 很多场景都需要改变 this 的指向. 现在我们讨论更改 this 指向的问题. call更改this指向 call 的使用语法:func.call(thisArg, arg1, arg2, ...) call 方法需要一个指定的 this 值( this要指向的对象 )和一个或者多个参数.提供的 this 值会更改调用函数内部的 this 指向. // 使用 call 方法改变调用函数执行上

  • 浅谈JavaScript中面向对象的的深拷贝和浅拷贝

    理解深拷贝和浅拷贝之前需要弄懂一些基础概念,内存中存储的变量类型分为值类型和引用类型. 1.值类型赋值的存储特点, 将变量内的数据全部拷贝一份, 存储给新的变量. 例如:var num = 123 :var num1=num; 表示变量中存储的数字是 123.然后将数据拷贝一份,就是将 123 拷贝一份. 那么内存中有 2 个 数组;将拷贝数据赋值给 num2,其特点是在内存中有两个数据副本.这可以理解为浅拷贝. 2.引用类型的赋值. var o={name:'张三'}: var obj=o;

  • 浅谈javascript中的constructor

    constructor,构造函数,对这个名字,我们都不陌生,constructor始终指向创建当前对象的构造函数. 这里有一点需要注意的是,每个函数都有一个prototype属性,这个prototype的constructor指向这个函数,这个时候我们修改这个函数的prototype时,就发生了意外.如 function Person(name,age){ this.name = name; this.age = age; } Person.prototype.getAge = function

  • 浅谈javascript中的Function和Arguments

    javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用,  则返回null(firefox返回undefined).  注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法  由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])

  • 浅谈javascript中new操作符的原理

    浅谈javascript中new操作符的原理

    javascript中的new是一个语法糖,对于学过c++,java 和c#等面向对象语言的人来说,以为js里面是有类和对象的区别的,实现上js并没有类,一切皆对象,比java还来的彻底 new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,在使用new的过程中,一共有3个对象参与了协作,构造器函数是第一个对象,原型对象是二个,新生成了一个空对象是第三个对象,最终返回的是一个空对象,但这个空对象不是真空的,而是已经含有原型的引用(__proto__) 步骤如下: (1) 创建一

  • JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

随机推荐