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