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 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!