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

定义和用法:

  

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

提示: 1000 毫秒= 1 秒。

提示: 如果你只想执行一次可以使用 setTimeout() 方法。

实例:

01,每三秒(3000 毫秒)弹出 "Hello" :   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>点击按钮,等待 3 秒会弹出 "Hello"。</p>
<p>在弹出的对话框中点击 “确定”, 3 秒后会继续弹出。如此循环下去...</p>
<button onclick="myFunction()">点我</button> <script>
function myFunction() {
setInterval(function(){ alert("Hello"); }, 3000);
}
</script> </body>
</html>

      

02,可以通过调用一个已命名的函数,每三秒(3000 毫秒)弹出 "Hello":

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>点击按钮,等待 3 秒会弹出 "Hello"。</p>
<p>在弹出的对话框中点击 “确定”, 3 秒后会继续弹出。如此循环下去...</p>
<button onclick="myFunction()">点我</button> <script>
var myVar; function myFunction() {
myVar = setInterval(alertFunc, 3000);
} function alertFunc() {
alert("Hello!");
}
</script> </body>
</html>

03,显示当前时间( setInterval() 方法会每秒执行一次函数,类似手表功能):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>显示当前时间:</p>
<p id="demo"></p> <script>
var myVar = setInterval(function(){ myTimer() }, 1000); function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
</script> </body>
</html>

04,使用 clearInterval() 来停止 setInterval 的执行:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>显示当前时间:</p>
<p id="demo"></p> <button onclick="myStopFunction()">停止时间</button> <script>
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);
}
</script> </body>
</html>

05,使用 setInterval() 和 clearInterval()来创建动态进度条:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<style>
#myProgress {
width: 100%;
height: 30px;
position: relative;
background-color: #ddd;
} #myBar {
background-color: #4CAF50;
width: 10px;
height: 30px;
position: absolute;
}
</style>
<body> <h1>JavaScript 进度条</h1> <div id="myProgress">
<div id="myBar"></div>
</div> <br>
<button onclick="move()">点我</button> <script>
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script> </body>
</html>
 

js实现定时调用的函数setInterval()的更多相关文章

  1. 最近遇到了 timer1sec 定时调用的函数,出现了 时间久了,就不是每秒一次了,可能会慢的情况。如何解决呢?

    我想可以在timer1sec 调用四个线程,让四个线程来执行 具体代码,而不是在timer1sec一个线程 直接执行.这样,每个线程 不超过4s,那么没秒都会被调用到. 需要使用到的技术是 semap ...

  2. js中被调用的函数获取调用者对象

    通过event.srcElement即可.一直用了很久的传参,终于解决了.

  3. js函数——setinterval和setTimeout

    1.window.setTimeout方法 该方法可以延时执行一个函数,例如: <script language="JavaScript" type="text/j ...

  4. node源码详解(四) —— js代码如何调用C++的函数

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource4 本博客同步在https://cnodejs.o ...

  5. JavaScript定时调用函数(SetInterval与setTimeout)

    setTimeout和setInterval的语法同样.它们都有两个參数.一个是将要运行的代码字符串.另一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将运行那段代码. 只是这两个函数还是有差别的 ...

  6. Javascript中的定时调用函数setInterval()和setTimeout()

    首先介绍这两个函数 一.setInterval() 按照指定的周期来调用函数或表达式,执行多次.(时间单位:ms) timer = setInterval("content =documen ...

  7. [JS]深入理解JavaScript系列(4):立即调用的函数表达式

    转自:汤姆大叔的博客 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.在详细了解这个之前,我们来谈了解一下"自执行"这个叫法 ...

  8. VC与JavaScript交互(三) --- CWebPage类调用javascript函数(给js函数传参,并取得返回值)

    ①需要一个别人写好的类CWebPage,将其对于的两个文件WebPage.h和WebPage.cpp添加到工程中. ②添加WebBrowser控件,在视图/对话框类的头文件中#include &quo ...

  9. QML和JS引擎的关系以及调用c++函数的原理

    首先推荐几篇博客 1.深入解析QML引擎, 第1部分:QML文件加载 https://www.cnblogs.com/wzxNote/p/10569535.html 2.深入解析QML引擎, 第2部分 ...

随机推荐

  1. Algorithm3: 获得一个int数中二进制位为1 的个数

    获得一个int数中二进制位为1 的个数   int NumberOfOne(int n){                  int count = 0;                  unsig ...

  2. poj 1182 食物链(高级的带权并查集)

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 76486   Accepted: 22742 Description ...

  3. MongoDB中MapReduce不同的写法,不同的结果

    MapReduce有两种写法,也可以说mongodb所有的命令行都有两种写法. 但突然间发现MapReduce不同的写法会有不同的结果,接下来我们一起来看: 第一种:直接使用扩展属性. 1)emit函 ...

  4. 分布式锁-基于ZK和Redis实现

    一.基于zookeeper实现分布式锁 1.1 Zookeeper的常用接口 package register; import java.util.List; import java.util.con ...

  5. 原生js重写《锋利的JS》之 轮播效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. flask框架中勾子函数的使用

    在客户端和服务器交互的过程中,有些准备工作或扫尾工作需要处理,比如: 在请求开始时,建立数据库连接: 在请求开始时,根据需求进行权限校验: 在请求结束时,指定数据的交互格式: 为了让每个视图函数避免编 ...

  7. vim+ctags用法

    vim用法     在VIM编辑器的环境下用":make"就可以编译程序,如果程序中有错误,就会显示出来.          下列命令可以快速定位,并修改错误错误 ":c ...

  8. Linux:vim环境设置

    vim环境设置 vim的环境设置在/etc/vimrc的这个文件中,不过不建议直接修改该配置文件.但是可以修改~/.vimrc文件,默认是不存在的,要手动创建并写入设置值. set hlsearch ...

  9. 简单说说什么是Restful

    在确定要把自己的服务创建成RESTFUL之前,要明白什么样的服务什么是RESTFUL service(https://en.wikipedia.org/wiki/Representational_st ...

  10. AE编码、稀疏编码(待续)

    http://ufldl.stanford.edu/tutorial/unsupervised/SparseCoding/