定时器可以让 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. 基数排序(radix sort)

    #include<iostream> #include<ctime> #include <stdio.h> #include<cstring> #inc ...

  2. struts2 标签问题----日期显示

    对于要显示按照自己的意愿进行显示的话: <s:date name="date" format="yyyy-MM-dd HH:mm:ss.SSS" /> ...

  3. LeetCode之Min Stack 实现最小栈

    LeetCode相关的网上资源比较多,看到题目一定要自己做一遍,然后去学习参考其他的解法. 链接: https://oj.leetcode.com/problems/min-stack/ 题目描述: ...

  4. js打印html中的内容

    js打印方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  5. Mac OS X 上的安装Lisp开发环境

    到网站:https://common-lisp.net/project/lispbox/ 下载lispbox 解压下载下来的包,找到Emacs 测试: 我们也可以使用homebrew来安装lisp的解 ...

  6. Java Hour 36 Weathre ( 9 ) struts2 – exception

    有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 35 Exception Handling 直接添加全局性的异常处理 ...

  7. poj 2195 二分图带权匹配+最小费用最大流

    题意:有一个矩阵,某些格有人,某些格有房子,每个人可以上下左右移动,问给每个人进一个房子,所有人需要走的距离之和最小是多少. 貌似以前见过很多这样类似的题,都不会,现在知道是用KM算法做了 KM算法目 ...

  8. cf 621D

    http://acm.zzkun.com/archives/717 这个大神的解答非常,额 猥琐.但是实在是太强了.感觉所有的大数都可以用 long double 了.

  9. 简单几何(直线求交点) POJ 2074 Line of Sight

    题目传送门 题意:从一条马路(线段)看对面的房子(线段),问连续的能看到房子全部的最长区间 分析:自己的思路WA了:先对障碍物根据坐标排序,然后在相邻的障碍物的间隔找到区间,这样还要判断是否被其他障碍 ...

  10. 简单几何(线段相交) POJ 2826 An Easy Problem?!

    题目传送门 题意:两条线段看成两块木板,雨水从上方往下垂直落下,问能接受到的水的体积 分析:恶心的分类讨论题,考虑各种情况,尤其是入口被堵住的情况,我的方法是先判断最高的两个点是否在交点的同一侧,然后 ...