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

jTimer:

(function ($) {

    $.extend({

        timer: function (action,context,time) {

            var _timer;

            if ($.isFunction(action)) {

                (function () {

                    _timer = setInterval(function () {

                        if (!action(context)) {

                            clearInterval(_timer);

                        }

                    }, time);

                })();

            }

        }

    });

})(jQuery);

demo:

<!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>

jTimer的更多相关文章

  1. swing Event-Listener-Adapter 对照表

    Source Event Event Listener AbstractButton (JButton,JToggleButton, JCheckBox,JRadioButton ActionEven ...

  2. 02.lib-v1.js

    /* Date: 2014-07-29 4:06:07 [PM] */ function StringBuilder() { this.strings = new Array, this.length ...

  3. JavaScript倒计时类

    (function (){ var jtimer = function() { // init if(arguments.length >= 1) { this.setEndTime(argum ...

随机推荐

  1. C和C指针小记(十五)-结构和联合

    1.结构 1.1 结构声明 在声明结构时,必须列出它包含的所有成员.这个列表包括每个成员的类型和名称. struct tag {member-list} variable-list; 例如 //A s ...

  2. [04-01]css组合选择器

    /* 私人笔记 */   组合选择器:把基本选择器通过特殊符号串在一起,可以带来一些特殊的意义: 1.源码 <!DOCTYPE html> <html lang="zh&q ...

  3. pandas 2

    ============== sdf={'rkey':[1,2,3,2],'name':['rkey1','rkey2','rkey3','rkey4']}sdf2={'lkey':[1,2,3],' ...

  4. nginx cookie 丢失问题

  5. python if 和 else

    money = input("请输入你在学校有多少钱?")if int(money) > 5000: print("这个月可以潇洒潇洒了,每天可以出去吃大餐了.&q ...

  6. Spring框架的第三天

    ## Spring框架的第三天 ## ---------- **课程回顾:Spring框架第二天** 1. IOC的注解方式 * @Value * @Resource(name="" ...

  7. 宝岛探险，DFS&BFS

    问题描述: 小哼通过秘密方法得到一张不完整的钓鱼岛航拍地图.钓鱼岛由一个主岛和一些附属岛屿组成,小哼决定去钓鱼岛探险.下面这个10*10的二维矩阵就是钓鱼岛的航拍地图.图中数字表示海拔,0表示海洋,1 ...

  8. CentOS 7 搭建CA认证中心实现https取证

    CA认证中心简述 CA :CertificateAuthority的缩写,通常翻译成认证权威或者认证中心,主要用途是为用户发放数字证书 功能:证书发放.证书更新.证书撤销和证书验证. 作用:身份认证, ...

  9. Nginx 多域名配置

    nginx绑定多个域名可又把多个域名规则写一个配置文件里,也可又分别建立多个域名配置文件,我一般为了管理方便,每个域名建一个文件,有些同类域名也可又写在一个总的配置文件里.一.每个域名一个文件的写法  ...

  10. 查看 chrome 浏览器中的 Headers

    查看 chrome 浏览器中的 Headers, Response 信息: