新睿云

 > 知识库 > 创建即启动，setInterval完美搭配定时周期性

创建即启动，setInterval完美搭配定时周期性

作者/来源：小睿 发布时间：2019-12-20

在进行应用程序开发时，开发人员有时需要在页面中执行一些周期性的操作，例如每间隔一段时间就要执行某一固定的操作。对于这种问题的解决，需要在应用程序中引入定时函数来进行解决以实现预期目标。

对于在应用程序中需要执行周期性操作，最简单和最高效的实现方式之一是使用setInterval。

setInterval

setInterval是一个间歇性定时器，实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。

由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数；注意这种定时器只要创建了就等于启动。

语法

setInterval(code, milliseconds);

setInterval(function, milliseconds, param1, param2, ...)

code/function ：必需，要调用一个代码串，也可以是一个函数。

Milliseconds：必须，周期性执行或调用code/function之间的时间间隔，以毫秒计（1000毫秒=1秒）。

param1, param2, ... ：可选，传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

实例

1）显示当前时间

var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {

var d = new Date();

var t = d.toLocaleTimeString();

document.getElementById("demo").innerHTML = t;

}

2）使用 clearInterval()来停止 setInterval 的执行

var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {

var d = new Date();

var t = d.toLocaleTimeString();

document.getElementById("demo").innerHTML = t;

}

function myStopFunction() {

clearInterval(myVar);

}

3）每 300毫秒切换背景颜色

var myVar = setInterval(function(){ setColor() }, 300);

function setColor() {

var x = document.body;

x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";

}

function stopColor() {

clearInterval(myVar);

}

setInterval适用于要求在每隔一个固定的时间间隔后就精确地执行某动作。

上一篇 : Lodash降低Object难度，简化JS使用，Object是什么？
下一篇 : 网站信息服务无证服务有风险 ICP规范网站安全
相关推荐
最近更新
热门标签
new year
在线咨询
咨询热线 400-1515-720
投诉与建议

投诉与建议

{{item.description}}

—您的烦恼我们已经收到—

我们会将处理结果发送至您的手机

请耐心等待

取消 提交反馈 确定