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

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. JDBC事务（二）转账示例

    示例采用三层框架 web层: package cn.sasa.web; import java.io.IOException; import javax.servlet.ServletExceptio ...

  2. 005-mac下Java开发工具安装，idea，maven，git，node

    1.idea 官网下载:https://www.jetbrains.com/idea/download/#section=mac 1.1.双击安装即可. 1.2.打开程序,激活,网络搜索lanyu 1 ...

  3. python中的装包与拆包

    python中的装包与拆包 *args和 **kwargs是在python的代码中经常用到的两个参数,初学者对这两个参数的理解可能仅仅限于*args是用于接收多余的未命名参数,**kwargs用于接收 ...

  4. Mysql导入表信息[Err] 1067 - Invalid default value for '字段名'

    修改mysql配置文件 vi /etc/my.cnf //添加以下配置 sql_mode=ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISI ...

  5. keras框架 反复调用model 模型 出错

    Cannot interpret feed_dict key as Tensor: Tensor Tensor("Placeholder_8:0", shape=(3, 3, 12 ...

  6. 监听器&上传下载&I18N

    监听器(Listener) 监听Java对象 的方法调用和属性改变() web的一个组件 事件驱动编程:事件源,事件名称,事件响应函数,事件对象 以后在Spring中的配置 WEB中有哪些监听器?  ...

  7. TP无限回复

    引入文件和css样式 <script src="__PUBLIC__/bootstrap/js/jquery-1.11.2.min.js"></script> ...

  8. sublime-text3打造markdown编辑器

    编辑插件 sublime自带的markdown语法高亮并不是很友好,推荐安装Markdown Editing,github主页然后在视图->语法里选择MarkdownEditing启用,支持三种 ...

  9. HDU 1114

    在 ACM 能够开展之前,必须准备预算,并获得必要的财力支持.该活动的主要收入来自于 Irreversibly Bound Money (IBM).思路很简单.任何时候,某位 ACM 会员有少量的钱时 ...

  10. Python 第五阶段 学习记录之----rabbmit

    消息服务器rabbmit RabbitMQ 消息队列 python里有两个Q, threading queue.不同线程间数据交互 进程Queue: 不同进程间交互这个说法是错误的. 这个是用于父进程 ...