定时器可以让 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. swift复合类型

     1.元组类型 (tuple) 元组就是多个元素的组合,是一个用圆括号括起来分号分隔的多个数据的一个集合体. 例如:定义一个学生变量,要求姓名 jim,年龄 19,性别 male 的元组变量为  // ...

  2. Android自定义实现FlowLayout

    实现FlowLayout 何为FlowLayout,如果对Java的Swing比较熟悉的话一定不会陌生,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行. ...

  3. js伪数组及转换

    什么是伪数组 能通过Array.prototype.slice转换为真正的数组的带有length属性的对象. 这种对象有很多,比较特别的是arguments对象,还有像调用getElementsByT ...

  4. Python中通过cx_oracle操作ORACLE数据库的封闭函数

    哈哈,看来我的SQL自动化发布,马上就全面支持ORACLE,MYSQL,POSTGRESQL,MSSQL啦... http://blog.csdn.net/swiftshow/article/deta ...

  5. [杂] 一些常用的SQL归类之一

    整理了一大坨的常用SQL语句,以方便自己需要用的时候查找. 查看锁 SELECT [request_session_id] , c.[program_name] , DB_NAME(c.[dbid]) ...

  6. Hadoop开发中，如何开启、关闭控制台打印调试信息

    第一种方法: 修改$HADOOP_CONF_DIR/log4j.properties文件 hadoop.root.logger=ALL,console 第二种方法 开启:export HADOOP_R ...

  7. 【HTML5】SVG内联

    什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...

  8. Marvelous Mazes

    F - Marvelous Mazes Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submi ...

  9. js:数据结构笔记10--图和图算法

    图:是由边和定点的集合组成:  按照图的定点对是否有序可以分为:有向图和无向图:  路径:所有顶点都由边连接构成:路径长度为第一个定点到最后一个顶点之间的数量:  环:指向自身的顶点,长度为0:圈:至 ...

  10. Xamarin Anroid开发教程之下载安装Xamarin

    Xamarin Anroid开发教程之下载安装Xamarin Xamarin在过去安装时都会检查系统中是否安装了前面所提供的内容.而后来,Xamarin安装时只提供安装步骤,其它内容都需要读者自己下载 ...