setInterval定时器（先触发一次再延时）

最新推荐文章于 2023-07-18 19:34:01 发布

tonyhzw

最新推荐文章于 2023-07-18 19:34:01 发布

阅读量4.1w

点赞数 8

分类专栏： web开发文章标签： js定时器先触发再定时

本文链接：https://blog.youkuaiyun.com/datou0529/article/details/54319029

版权

web开发专栏收录该内容

32 篇文章

订阅专栏

本文探讨了在使用setInterval时，如何确保函数先立即执行一次，然后再按设定的时间间隔重复执行。通过示例代码展示了正确的实现方式，包括使用函数本身作为参数以及避免使用arguments.callee的替代写法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近经常遇到这样的问题：需要间隔多少秒获取一次数据。实际中，往往采用setInterval来实现，但是当参数传递不当时，会出现先延迟了一段时间后再执行获取的数据的函数。如：

    var data1=0;
    function count1(){
      console.log("count1:",data1++);
    }
    setInterval(count1,1000);

此时可以观察控制台，发现打印第一次会有延迟。如：

查看setInterval官方文档不难发现:

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);
Parameters

func

A function to be executed every delay milliseconds.

code

An optional syntax allows you to include a string instead of a function, which is compiled and executed every delay milliseconds. This syntax is not recommended for the same reasons that make using eval() a security risk.

…

因此，应该先执行以下原函数，再返回该函数给setInterval周期执行。此时可以如下实现：

    var data2=0;
    var count2= function(){
      console.log("count2:",data2++);
      return count2;//若不返回时，此函数只会执行一次
    }
    setInterval(count2(),1000);

这里也可以采用arguments.callee等方式指代当前函数。如：

不过也可以这样写：

   var data3=0;
   (function count3(){
       console.log("count3:",data3++);
       setTimeout(count3,1000);
   })();

此情况同样适用于setTimeout。