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

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. ArcGIS API for JavaScript经典例子

    地址为本地 1.绘制图形: http://localhost/arcgis_js_api/sdk/sandbox/sandbox.html?sample=toolbar_draw 2.双击编辑图形 h ...

  2. oracle日期格式化

    TO_CHAR(t.CAMERA_CREAT_TIME, 'YYYY-MM-DD HH24:MI:SS') as point_registerdate,TO_CHAR(t.CAMERA_MODIFY_ ...

  3. 从Windows到linux小记

    从Windows到linux小记 年后疯狂加班,趁着喘息的时间,更新一下安装linux的艰辛路程. 周四晚上,公司举办活动,好不容易从加班的节奏暂时脱离出来,我这人就是不能闲,只要一闲下来就会做die ...

  4. 数据格式XML、JSON详解

    一. XML数据格式 1.1 XML的定义  扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类 ...

  5. IDEA为了使用方便，需要改的几条配置

    自动编译开关 在Eclipse中自动编译开关是开着的,如下所示那么,在IDEA中,务必要手动将其打开,非常重要! 忽略大小写开关 IDEA默认是匹配大小写,此开关如果未关.你输入字符一定要符合大小写. ...

  6. Java连接MySQL报出警告 WARN: Establishing SSL connection without server's identity verification is not recommended.

    很多人使用JDBC连接MySQL时报出警告: WARN: Establishing SSL connection without server's identity verification is n ...

  7. 数据库join操作（MySQL）

    左连接,右连接,内连接 1.原始表:左表user_t,右表user_info 2.执行连接 #LEFT JOIN ; #RIGHT JOIN ; #INNER JOIN ; 2.1左连接:以左边为主 ...

  8. 流控制、FlowControl

    这个选项基本上所有网卡都会有,但是叫法会有些差别,比如Realtek网卡叫做流控制,Intel网卡叫做流程控制,还有一些网卡选项干脆是英文的,叫做FlowControl,很多交换机上也有这个功能,也叫 ...

  9. RPC服务和HTTP服务对比

    RPC服务和HTTP服务对比 RPC(即Remote Procedure Call,远程过程调用) 协议区别: RPC主要是基于TCP/IP协议的,而HTTP服务主要是基于HTTP协议的,我们都知道H ...

  10. 初识GitHub之创建文件

    在新建了一个项目(repository)后,会跳转到项目主页,如下图 Create new file(创建新文件)就是新建一个代码文件,Upload file(上传文件)即从内存中将代码文件上传至本项 ...