如何在 javascript 中“唯一地”重复一个函数 n 次
How do I "uniquely" repeat a function n times in javascript?
所以我有一些代码来绘制路径和圆圈。 每次启动函数时,圆圈都会在路径上动画化。我只想创建 10 条路径,每条路径都有自己的圆圈,每条路径上都有动画效果。当我简单地执行该函数 10 次时,路径生成得很好,但是圆都沿着相同的单一路径进行动画处理。我在这里做错了什么?这里创建 for(i=0) 循环的最佳方法是吗?
你可以在jfiddle上查看我的代码,或者在这里看看它:
function commerce() {
Raphael("commercebounce", function () {
var r = this;
function pathfade() {
var pa = .1,
pb = .4,
pc = [0, 2],
pd = [50, 300],
pe = [150, 800],
pf = [150, 350],
pg = pd[0] + Math.random() * (pd[1] - pd[0]),
ph = pe[0] + Math.random() * (pe[1] - pe[0]),
pi = pf[0] + Math.random() * (pf[1] - pf[0]),
bd = .1,
be = .9,
pathspot = bd + Math.random() * (be - bd),
colours = ["215,10,45", "115,115,115"],
stroke = ["", "- "];
opacity = pa + Math.random() * (pb - pa), colour = "rgb(" + colours[Math.round(Math.random())] + ")", strokeW = pc[Math.round(Math.random())];
pj = r.path("M 0 " + pg + " C 0 " + pg + " " + (ph - 100) + " " + pg + " " + ph + " 400 M " + ph + " 400 C " + ph + " 400 " + (ph + 100) + " " + pg + " 960 " + pi).attr({stroke: colour,"stroke-dasharray": stroke[Math.round(Math.random())],"opacity": 0});
bh = r.circle(0, 0, 7, 7).attr({"stroke-width": this.strokeW,stroke: colour,"stroke-opacity": this.opacity,fill: "none","fill-opacity": 0}).onAnimation(function() {
var t = this.attr("transform")})
leng = pj.getTotalLength();
r.customAttributes.along1 = function (v) {
var point = pj.getPointAtLength(v * leng);
return {
transform: "t" + [point.x, point.y] + "r" + point.alpha
}
};
return bh.attr({along1:0}), bh.animate({along1:pathspot},300), pj.animate({opacity:opacity},300), pj, bh
}
pathfade();//how do i repeat this function n times?
});
}
commerce();
据我所知,一个简单的循环应该没问题。如果你有兴趣,这是在 JavaScript 中循环的最快方法:
var i = 10; while (i--) {
//Your code..
}
你需要将 pathfade() 函数分解为多个只执行少数任务的简单函数。
有两个主要问题。首先,在变量声明期间应该有一个逗号的位置放置一个分号。查看笔画变量。其次,pathfade 返回多个值,而 javascript 只支持一个值。请记住,一旦你从函数返回,其余的语句就不会被执行。
最后,使用 for、do-while 或 while 循环来重复函数调用。
这是修复方法。抱歉,我没有时间重构。
function commerce() {
Raphael("commercebounce", function () {
var r = this;
function pathfade() {
var pa = 0.5,
pb = 0.9,
pc = [0, 2],
pd = [50, 300],
pe = [150, 800],
pf = [150, 350],
pg = pd[0] + Math.random() * (pd[1] - pd[0]),
ph = pe[0] + Math.random() * (pe[1] - pe[0]),
pi = pf[0] + Math.random() * (pf[1] - pf[0]),
bd = 0.1,
be = 0.9,
pathspot = bd + Math.random() * (be - bd),
colours = ["215,10,45", "115,115,115"],
stroke = ["", "- "],
opacity = pa + Math.random() * (pb - pa),
colour = "rgb(" + colours[Math.round(Math.random())] + ")",
strokeW = pc[Math.round(Math.random())],
pj = r.path("M 0 " + pg + " C 0 " + pg + " " + (ph - 100) + " " + pg + " " + ph + " 400 M " + ph + " 400 C " + ph + " 400 " + (ph + 100) + " " + pg + " 960 " + pi).attr({
stroke : colour,
"stroke-dasharray" : stroke[Math.round(Math.random())],
"opacity" : 0
}),
bh = r.circle(0, 0, 7, 7).attr({
"stroke-width" : this.strokeW,
stroke : colour,
"stroke-opacity" : this.opacity,
fill : "none",
"fill-opacity" : 0
}).onAnimation(function () {
var t = this.attr("transform")
}),
leng = pj.getTotalLength();
r.customAttributes.along1 = function (v) {
var point = pj.getPointAtLength(v * leng);
return {
transform : "t" + [point.x, point.y] + "r" + point.alpha
}
};
bh.attr({
along1 : 0
});
bh.animate({
along1 : pathspot
}, 300);
pj.animate({
opacity : opacity
}, 300);
}
var i = 10;
while( i-- ){
pathfade();
}
});
}
commerce();
演示:http://jsfiddle.net/VEdwG/6/
您应该阅读"C# 样式的元素"。
http://www.amazon.com/The-Elements-Style-Kenneth-Baldwin/dp/0521671590/ref=cm_cr-mr-title
var n = 5; //or however much you want
for (var i = 0; i < n; i++){
pathfade();
}
for
循环方法是这里最简单的选择。
相关文章:
- 我可以在json对象中添加一个函数吗
- 如何在JQuery函数中定义一个值,然后调用另一个函数并使用该值
- 是否可以将一个函数输入连接到另一个函数调用的文本
- 在另一个函数中使用变量this
- 在另一个函数成功结束后调用该函数
- mongoose.connect undefined不是一个函数
- 监听器必须是一个函数
- 使用JS函数来使用另一个函数的语法?node.js
- 如何取消object.prototypes javascript的一个函数
- 从Chrome扩展名中的popup.html文件在background.js文件中运行一个函数
- 嵌套到另一个函数中的Fancybox函数;不起作用
- 如何在javascript中使用不止一个函数
- jQuery-在页面加载时执行一个函数
- jquery UI draggable:UI.children不是一个函数
- jQuery Mobile Undefined不是一个函数
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- javascript函数将数据添加到屏幕,但随后被另一个函数覆盖
- JS异常:animate不是一个函数
- 如何将一个函数附加到一个不存在的元素上
- JavaScript/jQuery-添加添加和删除类与下一个函数之间的延迟