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. 73条日常Linux shell命令汇总

    1.检查远程端口是否对bash开放: echo >/dev/tcp/8.8.8.8/53 && echo "open" 2.让进程转入后台: Ctrl + z ...

  2. h5和app原生联调触发方法

    //路径跳转 urlHref(item) {//人物.访谈.动态是一个页面 var para = {}; para.title = "动态详情"; para.type = &quo ...

  3. 制作smarty模版缓存文件

    <?php$p = 1;if(!empty($_GET["page"])){ $p = $_GET["page"];} $filename = " ...

  4. 个人Blog小程序开发完毕

    今天忙了一天,算是把这个小程序弄好了,包括小程序前端页面.接口对接.后台系统.服务器架 设.域名备案.证书安装(现在阿里云的免费证书怎么审核要这么久啊,到现在还在审核中) 先上截图: 这个背景图片的替 ...

  5. LXC、LXD、Docker的区别与联系(by quqi99)

    版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 容器 namespace技术用来进行做进程间的隔 ...

  6. [置顶] Android 关于SP读取与存储正确打开方式?

    一.存储方式分类:SharedPreferences存储 二.SharedPreferences存储 1.特点 ①存储单一数据,例如数值,字符串,布尔 ②文件:/date/date/包名/shared ...

  7. [置顶] Android 状态栏那些小坑?

    背景:因为之前老板上次问我我们的app能不能自定义上面的状态栏我说可以啊!当时没管,今天试了下果然很多坑,之前github上也有很多大佬写了一个开源库有兴趣的可以点进去看下支持DrawLayout沉侵 ...

  8. .NET 方法回调

    使用 AsyncCallback 委托在一个单独的线程中处理异步操作的结果. AsyncCallback 委托表示在异步操作完成时调用的回调方法. 回调方法采用 IAsyncResult 参数,该参数 ...

  9. 【NodeJs】入门笔记一

    忙乎了两周,把一个后台模型项目完成了,整个过程又进步不少,私喜一下. 暂时可以悠闲两天,又一次把node教程拿出来,每次都看一点点,积少成多吧. 查了很多资料,觉得从<Node入门>开始看 ...

  10. JS 快速获取数据中的最大、最小值

    var  numbers = [5,23 , 1420 , 5215 , 228 , 400 , 105, 411]; var maxInNumbers = Math.max.apply(Math, ...