html使用定时器timer,jquery插件jTimer jquery定时器的用法举例

本节内容：

jquery插件jTimer，jQuery定时器。

需求：

按时间间隔执行一个任务，当满足一定条件时停止执行。

1，插件用法：

复制代码 代码示例:

(function ($) {

$.extend({

timer: function (action,context,time) {

var _timer;

if ($.isFunction(action)) {

(function () {

_timer = setInterval(function () {

if (!action(context)) {

clearInterval(_timer);

}

}, time);

})();

}

}

});

})(jQuery);

2，调用示例

复制代码 代码示例:

画布-jTimer插件示例-www.jbxue.com

#wrap

{

display: table;

margin: 0 auto;

}

#cvs

{

display: table-cell;

vertical-align: middle;

}

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);

});