【JavaScript高级程序设计】25、定时器

1、JavaScript定时器

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JavaScript的定时器功能</title>
</head>
<body>
    <button id = "mybut" type="button">这是一个按钮</button>
    <div id = "divv"></div>
    <script type="text/javascript">
        
        //获取按钮
        var but = document.getElementById('mybut');

        //每当点击一次按钮页面就出现一段话,1秒之后
        but.onclick = function(){
            setTimeout(function(){
                var date = new Date();
                alert("今天是" + date.getFullYear() + "年");
            }, 3000);
        };


    </script>
</body>
</html>

 

执行结果：

 

 

 

2、定时器避免重复执行

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Yielding processes定时器，数组分块</title>
</head>
<body>
    <div id="myDiv" style="background:yellow;"></div>
    <input type="button" value="测试" style="background:green;"></input>
    <script type="text/javascript">
        var data = [12,123,1234,453,436,23,23,5,4123,45,346,5634,2234,345,342];
        //添加div函数
        function printButton(item)
        {
            //获取到将要用来执行的div
            var mydiv = document.getElementById("myDiv");
            mydiv.innerHTML += "<input type='button' value="+ item +"></input><br>";
        }
        
        //定时器函数
        function chunk(data, process, context)
        {
            setTimeout(function(){
                //每次取出一个数
                var item = data.shift();
                process.call(context, item);
                //定时执行完成，队列添加新定时器
                if(data.length > 0)
                {
                    //定时终止条件
                    setTimeout(arguments.callee, 2000);
                }
            }, 200);
        }

        chunk(data, printButton);

    </script>
</body>
</html>

 

避免重复定时器

 

posted @ 2016-08-24 23:49  cutter_point  阅读(224)  评论(0)    收藏  举报