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

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. emcc,wasm,webassembly

    WASM: https://github.com/Hanks10100/wasm-examples/tree/master/simple mkdir hello cd hello echo '#inc ...

  2. layui上传文件前端报404,实际文件已经上传成功

    原因:上传回调的方法接收的参数应该是json格式的,之前返回的是String,所以一直走异常的方法 第一种 在后台上加上@ResponseBody 第二种 @ResponseBody @Request ...

  3. React-Router4.x中文文档

    以下为翻译的中文API(水平有限,凑合看,欢迎纠正补充~) <BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件 ...

  4. CentOS 7 之 Systemd 入门教程:命令篇

    Systemd 是 Linux 系统工具,用来启动守护进程,已成为大多数发行版的标准配置 历史上,Linux 的启动一直采用init进程 下面的命令用来启动服务 [root@DaMoWang ~]# ...

  5. C++ Const指针

  6. Python学习笔记(1)__name__变量

    这是我在网上找到的一篇文章的标题. 本着学会了才是自己的,所以标题不变,自己试着再写一遍. 问题:__name__是什么? 背景:在学习编程规范的时候,我被要求函数的调用只能在__main()函数中使 ...

  7. netty如何实现零拷贝

    根据 Wiki 对 Zero-copy 的定义: "Zero-copy" describes computer operations in which the CPU does n ...

  8. python 匿名函数捕获变量值 (执行时的值)

  9. mock基本使用

    **一.mock解决的问题** 开发时,后端还没完成数据输出,前端只好写静态模拟数据.数据太长了,将数据写在js文件里,完成后挨个改url.某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼.想要尽可 ...

  10. Linux 查看系统负载

    查看系统负 # 查看系统负载 命令:uptime :: up :, users, load average: 0.00, 0.00, 0.00 注:load average: 0.00, 0.00, ...