当前位置: 编程技术>jquery
jquery插件jTimer jquery定时器的用法举例
来源: 互联网 发布时间：2014-09-03
本文导语: 本节内容： jquery插件jTimer，jquery定时器。 需求： 按时间间隔执行一个任务，当满足一定条件时停止执行。 1，插件用法： 代码示例: (function ($) { $.extend({ timer: function (action,context,time) { va...
本节内容：
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);
$.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.
#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);
});
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。