jquery插件jTimer(jquery定时器)使用方法

更新时间：2013年12月23日 11:47:24 作者：

很多时候我们需要按时间间隔执行一个任务,当满足一定条件时停止执行.此插件旨在解决这一经常遇到的问题

(function ($) {
    $.extend({
        timer: function (action,context,time) {
            var _timer;
            if ($.isFunction(action)) {
                (function () {
                    _timer = setInterval(function () {
                        if (!action(context)) {
                            clearInterval(_timer);
                        }
                    }, time);
                })();
            }
        }
    });
})(jQuery);

复制代码代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>画布</title>
    <script src="../script/jquery.min.js"></script>
    <script src="../script/jTimer.js"></script>
    <style type="text/css">
        #wrap
        {
            display: table;
            margin: 0 auto;
        }

        #cvs
        {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
    <script type="text/javascript">
        function drawRound(context) {
            if (context.counterclockwise) {
                draw(context.x, context.y, context.r, context.start, context.start - Math.PI / 50, context.counterclockwise);
                context.start -= Math.PI / 50;
                return context.start > 0.5 * Math.PI;
            }
            else {
                draw(context.x, context.y, context.r, context.start, context.start + Math.PI / 50, context.counterclockwise);
                context.start += Math.PI / 50;
                return context.start < Math.PI;
            }
        }
        function draw(x, y, r, sAngle, eAngle, counterclockwise) {
            var cvs = document.getElementById("cvs");
            ctx = cvs.getContext("2d");
            ctx.strokeStyle = "#f00";
            ctx.beginPath();
            ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);
            ctx.stroke();
        }
        $(function () {
            $.timer(drawRound, { x: 100, y: 100, r: 50, start: 1.5 * Math.PI, counterclockwise: true }, 200);
            $.timer(drawRound, { x: 100, y: 100, r: 60, start: 0, counterclockwise: false }, 200);
        });
    </script>
</head>
<body>
    <div id="wrap">
        <canvas id="cvs" height="400" width="500"></canvas>
    </div>
</body>
</html>

您可能感兴趣的文章:

jquery 常用操作整理基础入门篇
jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
2009-10-10
基于jQuery的checkbox全选问题分析
这篇文章主要介绍了基于jQuery的checkbox全选问题,结合实例形式分析了jQuery实现全选功能中遇到的问题与相应的解决方法,需要的朋友可以参考下
2016-11-11
jQuery统计指定子元素数量的方法
这篇文章主要介绍了jQuery统计指定子元素数量的方法,涉及jQuery可以通过>访问子标签的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
jquery简单瀑布流实现原理及ie8下测试代码
可以将分页获取的内容依次填入四个div中，瀑布流的分页可以以多页（比如5页）为单位二次分页，这样可以减少后台算法的复杂度;测试环境：ie8 ff13.0.1 chrome22有兴趣的朋友可以了解下
2013-01-01
初试jQuery EasyUI 使用介绍
想必关注jQuery的同学们对jQuery EasyUI已经有所耳闻了，目前已经更新到1.0.5版本，风格与EXTJS有点相似，可以很好的满足开发人员对UI的需求。
2010-04-04
Json2Template.js 基于jquery的插件绑定JavaScript对象到Html模板中
Json2Template.js是一个Jquery插件, 用来绑定JavaScript对象到Html模板中
2011-10-10
通过pjax实现无刷新翻页(兼容新版jquery)
这篇文章主要介绍了通过pjax实现无刷新翻页，兼容新版jquery，使用心得方法,需要的朋友可以参考下
2014-01-01
JQuery $.each遍历JavaScript数组对象实例
声明了一个JSON字符串直接遍历，在Chrome控制台下面报错，解决方法是将JSON字符串转换为JavaScript对象
2014-09-09
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
本文是介绍两个最常用的jQuery插件. 分别用于表单验证和自动完成提示(类似google suggest).
2011-02-02
11款新鲜的jQuery插件[附所有demo下载]
每天都会有新的jQuery插件诞生，这里和大家分享最新出炉的11款在实际项目中可能用到的jQuery插件，提供整理后的实例下载。
2011-01-01