jquery实现简单定时器自动执行示例

作者：Liaodeity - 2015年12月03日

实现一个简单的定时器处理效果，使用了setInterval来进行定时器的执行，自动执行，手动启动定时器，停止定时器的操作。

源代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>demo测试-建百站www.jianbaizhan.com</title>
</head>
<body>
<button id="run">启动定时器</button>
<button id="close">停止定时器</button>
<div></div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
    //当页面执行完毕执行代码
    $(function(){
        //定义定时器变量
        var interval;

        //加载立即执行第一次
        goToDo();

        //初始化自动执行。毫秒计算，当期表示2秒调用goToDo方法一次
        interval = setInterval("goToDo()",2 * 1000 );

        //监控id="run"的按钮，点击按钮进行开启执行定时器
        $("#run").click(function(){
            //清除当前的定时器，防止重复启动定时器
            clearInterval(interval);

            //执行启动定时器
            interval = setInterval("goToDo()",2 * 1000 );

            //文本交互
            $('div').append("<p>定时器已启动</p>");

        });

        //监控id="close"的按钮，点击按钮进行关闭定时器
        $("#close").click(function(){
            //清除定时器
            clearInterval(interval);

            //文本交互
            $('div').append("<p>定时器已停止</p>");
        });

    });

    //goToDo要执行的方法
    function goToDo(){
        //时间，记录执行的时间
        var date = new Date();
        
        //对div添加内容，展示效果
        $('div').append("<p>"+ date +"</p>");
    }
</script>
</body>
</html>

本文作者： Liaodeity

本文链接： https://www.jianbaizhan.com/article/327

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！