定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果。定时器不属于 javascript，是 window 对象提供的功能。

setTimeout 用法：

window.setTimeout('语句',毫秒);   //指定毫秒后执行一次语句

【例】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #div1{

            width: 300px;

            height: 300px;

            background: blue;

            border-bottom: 1px solid black;

        }

    </style>

</head>

<body>

    <p id="p">定时改变文字</p>

    <script>

        function change(){

            document.getElementById("p").innerHTML = "已更换";

        }

        window.setTimeout("change()", 3000); //3秒之后执行change方法

    </script>

</body>

</html>

优化：定时器的效果之上加上倒计时效果

setInterval('语句',毫秒);  //每隔指定毫秒执行一次

清除定时器：

clearInterval();

和

clearTimeout();

【代码】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #div1{

            width: 300px;

            height: 300px;

            background: blue;

            border-bottom: 1px solid black;

        }

    </style>

</head>

<body>

    <input type="button" name="time" value="5">

    <p id="p">定时改变文字</p>

    <script>

        function change(){

            var inp = document.getElementsByName("time")[0];

            var time = parseInt(inp.value)-1;

            inp.value = time;

            if(time == 0){

                document.getElementById("p").innerHTML = "已更换";

                clearInterval(clock);  //清除定时器

            }

        }

        var clock = setInterval("change()", 1000); //每秒钟执行一次

    </script>

</body>

</html>

【例】如果不适用 setInterval，只使用 setTimeout，达到每过一段时间执行一次的效果

使用 setTimeout 实现 setInterval 的效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #div1{

            width: 300px;

            height: 300px;

            background: blue;

            border-bottom: 1px solid black;

        }

    </style>

</head>

<body>

    <input type="button" name="time" value="5">

    <p id="p">定时改变文字</p>

    <script>

        var clock = null;

        function change(){

            var inp = document.getElementsByName("time")[0];

            var time = parseInt(inp.value)-1;

            inp.value = time;

            if(time == 0){

                document.getElementById("p").innerHTML = "已更换";

                clearTimeout(clock);

                return;

            }

            setTimeout("change()", 1000);

        }

        var clock = setTimeout("change()", 1000); //每秒钟执行一次

    </script>

</body>

</html>

Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval的更多相关文章

  1. JS 定时器 setTimeout 与 setInterval 的区别和用法

    定时器: window.setTimeout(function(){},间隔时间毫秒); -- 定时炸弹,延迟执行,只执行一次 window.setInterval(function(){},间隔的时 ...

  2. 定时器setTimeout()和setInterval()使用心得整理

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函 ...

  3. 有关定时器setTimeout()、setInterval()详解

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. setTimeout() setTimeout函数用 ...

  4. 高级定时器-setTimeout()、setInterval()、链式setTimeout()

    使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能.执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript ...

  5. 20180904 定时器setTimeout和setInterval回调问题

    引用: setTimeout和setInterval两者的区别 setTimeout和setInterval的优缺点 setTimeout和setInterval详解 两者的作用都是在定时多少毫秒后回 ...

  6. JavaScript 的定时（Timing ）事件——setTimeout()与setInterval()

    JavaScript 可以在时间间隔内执行,这就是所谓的定时事件( Timing Events). ㈠Timing 事件 ⑴window 对象允许以指定的时间间隔执行代码,这些时间间隔称为定时事件. ...

  7. 使用定时器settimeout、setInterval执行能传递参数的函数

    无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决.经网上查询后整理如下: 例如对于 ...

  8. javascript定时器:setTimeout与setInterval

    概述: setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次: setInterval:周期性地调用一个函数(function)或者执行一段代码,重复执行: 语法格式 ...

  9. JavaScript之关闭轮询定时器(setTimeout/clearTimeout|setInterval/clearInterval)小结

    已知: 1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:ti ...

随机推荐

  1. php 条件查询和多条件查询

    条件循环 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. 使yum保留下载的rpm包

    [root@14LN yum]# egrep 'cachedir|keepcache' /etc/yum.conf #cachedir=/var/cache/yum/$basearch/$releas ...

  3. iptables 开启80端口

    [root@v01-svn-test-server online]# iptables -F#清空规则 [root@v01-svn-test-server online]# iptables -L# ...

  4. Lucene查询索引（分页）

    分页查询只需传入每页显示记录数和当前页就可以实现分页查询功能 Lucene分页查询是对搜索返回的结果进行分页,而不是对搜索结果的总数量进行分页,因此我们搜索的时候都是返回前n条记录 package c ...

  5. DRF如何序列化外键的字段

    我觉得在有些应用场景下,这个操作是有用的,因为可以减少一个AJAX的请求,以增加性能. 当然,是二次请求,还是一次传输.这即要考虑用户体验,还要兼顾服务器性能. 一切是有条件的平衡吧.就算是一次传输, ...

  6. C# 读取本地图片 转存到其他盘符

    UpFileContent upfile = new UpFileContent(); upfile.StationImageName = "123.png"; FileStrea ...

  7. CDH 的Cloudera Manager免费与收费版的对比表

    CDH 特性 免费版 付费版 Deployment, Configuration & Management 系统管理 Automated Deployment & Hadoop Rea ...

  8. android 项目中规范使用SharedPreferences

    一.SharedPreferences是什么来的? SharedPreferences是Android四种数据存储技术中的一种(SharedPreferences.SQLite.Content Pro ...

  9. HTML-web storage

    cookie:是一个在服务区和客户端间来回传送文本值的内置机制: 大小受限:一般4KB: 只要涉及cookie,它就会自动在服务器和浏览器之间传送:  //会存在安全问题:多消耗网络宽带: 操作:de ...

  10. 分类 kNN

    #coding=utf-8 from numpy import * import operator from os import listdir import matplotlib import ma ...