利用setTimeout来实现setInterval

  在Js中,当我们要在一定间隔时间内不断执行同一函数,我们可以使用setInterval函数,但setInterval在某些情况下使用时也存在一定问题。

1.不去关心回调函数是否还在运行

在某些情况下,函数可能需要比间隔时间更长的时间去完成执行。比如说是用setInterval每隔5秒对远端服务器进行轮询,网络延迟,服务器无响应以及其他因素将会阻止请求按时按成。结果会导致返回一串无必要的排成队列请求。

2.忽视错误

因为某些原因,setInterval调用的代码中会出现一个错误,但是代码并不会中止执行而是继续执行错误的代码。

3.缺乏灵活性

除了前面提到的缺点之外,我非常希望setInterval方法能有一个表明执行次数的参数而不是无休止的执行下去。

一个更好的实现

基于上面几个原因我实现了自己的setInterval函数。它支持一个额外的参数用来标明代码执行的次数。

function interval(func, wait, times){
    var interv = function(w, t){
        return function(){
            if(typeof t === "undefined" || t-- > 0){
                setTimeout(interv, w);
                try{
                    func.call(null);
                }
                catch(e){
                    t = 0;
                    throw e.toString();
                }
            }
        };
    }(wait, times);

    setTimeout(interv, wait);
};

这个interval函数有一个叫做inter的内部函数,它通过setTimeout来自动被调用,在inter中有一个闭包,它检查了重复次数,调用了回调函数并通过setTimeout再次调用了interv。万一回调函数中出现了一个异常,interv调用将会终止,异常也会被抛出。

这种木事当然不能保证函数在固定的间隔中执行,但是它保证新的区间开始时上一个区间中的函数已经执行完毕,我认为这是非常重要的。

用法

现在我们可以在10秒的区间内执行一段代码5次,代码如下:

interval(function(){
    //执行的代码在这
},1000,10);

引用资料:http://www.thecodeship.com/web-development/alternative-to-javascript-evil-setinterval/

时间: 2025-01-13 20:19:38

利用setTimeout来实现setInterval的相关文章

什么是setTimeout函数和setInterval函数?

我们一般在浏览网页的时候,一般都会有图片轮播等,一些比较好玩的特效,接下来我就给大家讲讲这俩个函数! 一setTimeout函数和setInterval函数的语法以及应用 1.setTimeout函数 定义和用法:setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法:setTimeout(code,millisec); 参数: code (必需):要调用的函数后要执行的 JavaScript 代码串. millisec(必需):在执行代码前需等待的毫秒数. 提示: set

利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果

效果如图鼠标滑动导航  下边显示不同效果 html代码和css格式代码 <body> <div id="tab" class="tab"> <div class="tab-title" id="tab-title"> <ul> <li class="select" data-flag="0"><a href="#

window.setTimeout() 和window.setInterval() 的区别

setTimeout 和setInterval的功能都是经过某一个时间段后发生某件指定的事件或者方法. 如window.setTimeout("sleep()",5000);指的是在5000ms后去执行sleep方法,setTimeout也可以直接写方法体,如window.setTimeout(sleep,5000) 而setInterval不行. window.setInterval("sleep()",5000)指的是每隔5000ms循环执行sleep()方法.

window.setTimeout和window.setInterval的区别,及用其中一个方法记录时间。

window.setTimeout(语句,时间)是在多久之后执行语句,语句只执行一次. window.setInterval(语句,时间)是每隔多久执行一次语句,语句循环执行. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <span

setTimeout,clearTimeout和setInterval

http://www.cnblogs.com/backuper/archive/2009/12/02/1615129.html var timeout; timeout = setTimeout(hideResultsNow, 200);   //设定一个延迟时间,时间到了才会执行相应的method clearTimeout(timeout); //使它停下来,这就要用到clearTimeout(). setInterval("reloop()",1000);  //循环执行指定方法

js之定时器

一.通过定时器我们可以间隔设定时间重复调用某个函数,利用这个特性,我们可以做很多事,例如,12306上的每间隔5秒查询自动查询一次余票,简单动画的实现等等 二.定时器的格式: 定时器有两种格式,分别是setInterval(func, time) 和 setTimeout(func, time),这两个有一些区别 1.setInterval(func, tine); (1). 此定时器操作是这样的,解释到该语句时,是要间隔time时间后第一次执行func函数,间隔time时间后再次执行func函

setTimeout()和setInterval()的用法

JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象 SetInterval为自动重复,setTimeout不会重复. clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象)

setTimeout与setInterval方法的区别

setTimeout与setInterval方法的区别 setTimeout()用于设定在指定的时间之后执行对应的函数或代码.,在全局作用域下执行 setTimeout(code,time[,args…]) code: 需要执行的函数或js代码,等待的时间,args:参数 如:function sayHello(name, age){ //在5秒钟后弹出提示信息"我叫CodePlayer,今年18岁!". alert("我叫" + name + ",今年&

js中setTimeout与setInterval

setTimeout和setInterval javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中 以下方法都是window对象的方法: setTimeout() 和 clearTimeout() setInterval() 和 clearInterval() 一.使用时注意作用域 如果需要在对象内部用定时器执行该对象的某一方法时就需要注意了