setTimeout方法：

定义和用法：

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

tip: 1000 毫秒= 1 秒。

tip:  如果你只想重复执行可以使用setInterval()方法。

tip: 使用 clearTimeout() 方法来阻止函数的执行。

语法：setTimeout(code, milliseconds, param1, param2, ...)

返回值：返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行。

实例：

//eg1：三秒后弹出“HELLO”

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>点击按钮，3 秒后会弹出 "Hello"。</p>

<button onclick="myFunction()">点我</button>

<script>

var myVar;

function myFunction() {

    myVar = setTimeout(alertFunc, 3000);

}

function alertFunc() {

  alert("Hello!");

}

</script>

</body>

</html>

//eg2：第2、4、6秒修改输入框中的文本：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>点击按钮，在第 2、4、6 秒修改输入框中的文本：</p>

<button onclick="timedText()">显示时间文本</button>

<input type="text" id="txt">

<script>

function timedText() {

    var x = document.getElementById("txt");

    setTimeout(function(){ x.value="2 秒" }, 2000);

    setTimeout(function(){ x.value="4 秒" }, 4000);

    setTimeout(function(){ x.value="6 秒" }, 6000);

}

</script>

</body>

</html>

//eg3：打开一个新窗口，3 秒后将该窗口关闭

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>打开一个新窗口，3 秒后将该窗口关闭:</p>

<button onclick="openWin()">打开 "窗口"</button>

<script>

function openWin() {

    var myWindow = window.open("", "", "width=200, height=100");

    myWindow.document.write("<p>这是一个新窗口'</p>");

    setTimeout(function(){ myWindow.close() }, 3000);

}

</script>

</body>

</html>

//eg4计数器 -- 可以通过点击按钮停止：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>点击按钮，等待 3 秒后弹出 "Hello" 。</p>

<p>点击第二个按钮来阻止弹出函数 myFunction 的执行。 (你必须在 3 秒前点击)</p>

<button onclick="myFunction()">先点我</button>

<button onclick="myStopFunction()">阻止弹出</button>

<script>

var myVar;

function myFunction() {

    myVar = setTimeout(function(){ alert("Hello") }, 3000);

}

function myStopFunction() {

    clearTimeout(myVar);

}

</script>

</body>

</html>

//显示当前时间

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body onload="startTime()">

<div id="txt"></div>

<script>

function startTime() {

    var today = new Date();

    var h = today.getHours();

    var m = today.getMinutes();

    var s = today.getSeconds();

    // 在 numbers<10 的数字前加上 0

    m = checkTime(m);

    s = checkTime(s);

    document.getElementById("txt").innerHTML = h + ":" + m + ":" + s;

    var t = setTimeout(function(){ startTime() }, 500);

}

function checkTime(i) {

    if (i < 10) {

        i = "0" + i;

    }

    return i;

}

</script>

</body>

</html>

//eg5传递参数给 alertFunc 函数

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>点击按钮 2 秒后输出 "Hello"。</p>

<p>实例中，我们也会输出传递给 alertFunc() 函数的参数 ( 兼容所有浏览器 )。</p>

<button onclick="myStartFunction()">开始</button>

<p id="demo"></p>

<p id="demo2" style="color:red;"></p>

<script>

var myVar;

function myStartFunction() {

    myVar = setTimeout(function(){ alertFunc("Runoob", "Google"); }, 2000);

}

function alertFunc(param1, param2) {

    document.getElementById("demo").innerHTML += "Hello ";

    document.getElementById("demo2").innerHTML = "传递给 alertFunc() 的参数: <br>"

    + param1 + "<br>" + param2 + "<br>";

}

</script>

</body>

</html>

setInterval()方法

定义和用法：

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

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

语法：setInterval(code, milliseconds);

实例：

//显示当前时间( setInterval() 方法会每秒执行一次函数，类似手表功能):
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></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>
//使用 setInterval() 和 clearInterval()来创建动态进度条：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></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>

//每 300 毫秒切换背景颜色：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>以下实例中，setInterval() 方法每 300 毫秒执行 setColor() 函数 ，该函数可以切换背景颜色。</p>

<button onclick="stopColor()">停止切换</button>

<script>

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);

}

</script>

</body>

</html>

setTimeout()方法和setInterval()方法的更多相关文章

  1. ASP.NET Core 中文文档 第二章 指南（4.10）检查自动生成的Detail方法和Delete方法

    原文 Examining the Details and Delete methods 作者 Rick Anderson 翻译 谢炀(Kiler) 校对 许登洋(Seay).姚阿勇(Mr.Yao) 打 ...

  2. ThinkPHP的D方法和M方法的区别

    M方法和D方法的区别 ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 ...

  3. Hibernate中evict方法和clear方法说明

    Hibernate中evict方法和clear方法说明 先创建一个对象,然后调用session.save方法,然后调用evict方法把该对象清除出缓存,最后提交事务.结果报错: Exception i ...

  4. Android HTTP实例 使用GET方法和POST方法发送请求

    Android HTTP实例 使用GET方法和POST方法发送请求 Web程序:使用GET和POST方法发送请求 首先利用MyEclispe+Tomcat写好一个Web程序,实现的功能就是提交用户信息 ...

  5. virtual方法和abstract方法

    在C#的学习中,容易混淆virtual方法和abstract方法的使用,现在来讨论一下二者的区别.二者都牵涉到在派生类中与override的配合使用. 一.Virtual方法(虚方法) virtual ...

  6. JavaScript indexOf() 方法和 lastIndexOf() 方法

    一,定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索 ...

  7. wait方法和sleep方法的区别

    一.概念.原理.区别 Java中的多线程是一种抢占式的机制而不是分时机制.线程主要有以下几种状态:可运行,运行,阻塞,死亡.抢占式机制指的是有多个线程处于可运行状态,但是只有一个线程在运行.      ...

  8. M方法和D方法的区别

    M方法和D方法的区别 ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 ...

  9. ThinkPHP 中M方法和D方法详解----转载

    转载的地址,http://blog.163.com/litianyichuanqi@126/blog/static/115979441201223043452383/ 自己学到这里的时候,不能清除的分 ...

随机推荐

  1. WPF 插件开发（.NET Framework 3.5 System.Addin）

    http://www.cnblogs.com/lc329857895/archive/2009/07/22/1528640.html http://www.cnblogs.com/huihui0630 ...

  2. 品优购商城项目（二）mybatis分页插件

    品优购商城项目第二天,使用mybatis分页插件实现分页.主要实现的是 SSM整合mybatis分页. 一.引用mybatis分页插件 SqlMapConfig.xml <?xml versio ...

  3. kafka删除topic后再创建同名的topic报错（ERROR org.apache.kafka.common.errors.TopicExistsException）

    [hadoop@datanode3 logs]$ kafka-topics.sh --delete --zookeeper datanode1:2181 --topic firstTopic firs ...

  4. CentOS 7 新装服务器部署流程

    目录 1.设置时区 2.配置内网IP (如果是外网IP,linux要修改远程端口) 3.配置自己的yum源 4.关闭SELinux 5.添加zabbix监控 6.关闭防火墙和NM 7.安装软件包 8. ...

  5. 【C/C++开发】值得学习的C语言开源项目

    值得学习的C语言开源项目 - 1. Webbench Webbench是一个在Linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的 ...

  6. python虚拟环境的配置: virtualenv 和 virtualenvwrapper-win 的用法

    版本:python37, virtualenv==16.7.8, virtualenvwrapper-win==1.2.5 pip37 install virtualenv 安装支持虚拟环境的包,注意 ...

  7. Git常用命令及方法

    https://blog.csdn.net/web_csdn_share/article/details/79243308 Git常用命令及方法大全 下面是我整理的常用 Git 命令清单.几个专用名词 ...

  8. 异步I/O、事件驱动、单线程

    异步I/O.事件驱动.单线程 nodejs的特点总共有以下几点 异步I/O(非阻塞I/O) 事件驱动 单线程 擅长I/O密集型,不擅长CPU密集型 高并发 下面是一道很经典的面试题,描述了node的整 ...

  9. flask 密钥问题

    RuntimeError RuntimeError: The session is unavailable because no secret key was set. Set the secret_ ...

  10. 【Luogu P1345】[USACO5.4]奶牛的电信Telecowmunication

    Luogu P1345 很容易发现这题要求的是网络流中的最小割. 关于最小割,我们有最大流最小割定理:最小割的容量一定等于最大流的流量 但是这个定理是用于求最小割边,而题目要求我们求的是最小割点. 那 ...