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. tcping的安装和使用

    1.LINUX安装方法: 编译安装下载地址: http://linuxco.de/tcping/tcping.html tar zxvf tcping-1.3.5.tar.gz cd tcping-1 ...

  2. CSS技巧和经验

    如何清除图片下方出现几像素的空白间隙 方法1 img { display: block; } 方法2 除了top值,还可以设置为text-top | middle | bottom | text-bo ...

  3. bzoj 3197

    题解: 先找到中信 然后dp 代码: #include<bits/stdc++.h> using namespace std; ; ],a[N],b[N],s[N],c[N],f[N]; ...

  4. PHP trim()函数的作用和使用方法

    PHP trim()函数一般是用来去除字符串首尾处的空白字符(或者其他字符),一般在用在服务端对接收的用户数据进行处理,以免把用户误输入的空格存储到数据库,下次对比数据时候出错. 该函数有两个参数,第 ...

  5. is null 和=null的区别

    数据库中 null 表示 不可知,不确定 所以 判断都用 字段 is null的方式进行判断 而 = null .<> null 的判断结果,仍然是不可知,不确定,所以 不会返回任何结果. ...

  6. (转)使用Hive UDF和GeoIP库为Hive加入IP识别功能

    Hive是基于Hadoop的数据管理系统,作为分析人员的即时分析工具和ETL等工作的执行引擎,对于如今的大数据管理与分析.处理有着非常大的 意义.GeoIP是一套IP映射数据库,它定时更新,并且提供了 ...

  7. React-Native进阶_7.TextInput的使用实现搜索功能

    前面使用TabBar 实现了底部tab标签,通过stackNavigator 实现了页面跳转,接下来,使用TextInput 来实现一个搜索功能. TextInput 属性比较多,不一一介绍,具体可以 ...

  8. JSON Schema（模式）

    JSON Schema指的是数据交换中的一种虚拟的“合同”. JSON验证器负责验证语法错误,JSON Schema负责提供一致性检验. JSON Schema是数据接收方额第一道防线,也是数据发送方 ...

  9. 显卡、显卡驱动、显存、GPU、CUDA、cuDNN

    显卡 Video card,Graphics card,又叫显示接口卡,是一个硬件概念(相似的还有网卡),执行计算机到显示设备的数模信号转换任务,安装在计算机的主板上,将计算机的数字信号转换成模拟 ...

  10. 【剑指offer】丑数，C++实现

    原创博文,转载请注明出处!本题牛客网地址 博客文章索引地址 博客文章中代码的github地址 1. 题目 2. 思路 空间换时间的方法.由于题目要求按序查找丑数,可以采用辅助容器vector按序存储丑 ...