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. js中的执行环境及作用域

    最近在面试时被问到了对作用域链的理解,感觉当时回答的不是很好,今天就来说说js中的作用域链吧. 首先来说说js中的执行环境,所谓执行环境(有时也称环境)它是JavaScript中最为重要的一个概念.执 ...

  2. 【2018 “百度之星”程序设计大赛 - 初赛（B）- 1001】degree

    Problem Description 度度熊最近似乎在研究图论.给定一个有 N 个点 (vertex) 以及 M 条边 (edge) 的无向简单图 (undirected simple graph) ...

  3. Oracle 常用系统包

    一.DBMS_OUTPUT(用于输入和输出信息) 二.DBMS_JOB(用于安排和管理作业队列) 三.dbms_pipe(类似UNIX系统的管道) 四.dbms_alert(用于生成并传递数据库预警信 ...

  4. Talk to customer about the trouble with wireless failure connection。

    It’s upset for  me... 1 ATemel Studio61 and  MKII program failure. Notes: The Flash file : A 90 is w ...

  5. etl工具－Bireme

    前段时间做数据仓库项目,自己实现了一部分etl功能,后面一直没有时间去深入挖掘.这个工具貌似不错,写个帖子做下记录: https://hashdatainc.github.io/bireme/READ ...

  6. react中路由的跳转

    1.react-router-dom 使用react-router-dom 4.4.2 在页面中直接使用 引入 i mport { Link } from 'react-router-dom' 使用 ...

  7. android 城市选择

    我们在开发过程中兰冕会有选着城市地点等东西,这些都是常用的东西,所以我也就将他封装起来了先来看看效果吧 1.首先看下项目的结构: 2.看下整体的项目效果 三:主ativity private Cont ...

  8. 【剑指offer】找出数组中任意一个重复的数字，C++实现

    原创博文,转载请注明出处! # 题目 # 思路 对于长度为n的数组,范围为0~n-1的数字而言,如果不粗在重复数字,则排序后数组元素和数组角标相同.如果存在重复数字,则在排序的过程中会出现不同下标对应 ...

  9. 【剑指offer】二叉搜索树转双向链表，C++实现

    原创博文,转载请注明出处! # 题目 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 二叉树节点的定义 struct TreeNod ...

  10. kubeadm搭建kubernetes集群之二：创建master节点

    在上一章kubeadm搭建kubernetes集群之一:构建标准化镜像中我们用VMware安装了一个CentOS7虚拟机,并且打算用这个虚拟机的镜像文件作为后续整个kubernetes的标准化镜像,现 ...