# 如何将函数存储到数组中，并通过javascript中的每一个循环

## 迭代

``````   myFunctions.forEach(function(row){
row.fx.apply(null, row.arguments);
});``````

## 用法示例：

``````  function add(a, b){return a + b;}
function sub(a, b){return a - b;}

var myFunctions = [
{fx: sum, arguments: [10,3]}
];

myFunctions.forEach(function(row){
row.fx.apply(null, row.arguments);
});``````

## 进一步解释

• 直接调用`add(1,3);`
• 使用function.call `add.call(thisContext, 1, 3)`
• 使用function.apply `add.apply(thisContext, [1, 3])` （与调用相同，但需要参数数组，请记住提示： a数组中
Question
``````function canvasApp() {

if (!canvasSupport()) {
return;
}

function drawScreen() {

context.font ="13px sans";

context.fillStyle = "#000";
context.beginPath();
context.arc(p1.x,p1.y,9,0,Math.PI*2,true);
context.closePath();
context.fill();
context.fillStyle = "#FFFFFF";
context.fillText("1",p1.x-2,p1.y+2);

context.fillStyle = "#000";
context.beginPath();
context.arc(p2.x,p2.y,9,0,Math.PI*2,true);
context.closePath();
context.fill();
context.fillStyle = "#FFFFFF";
context.fillText("2",p2.x-2, p2.y+2);

context.fillStyle = "#000";
context.beginPath();
context.arc(p3.x,p3.y,9,0,Math.PI*2,true);
context.closePath();
context.fill();
context.fillStyle = "#FFFFFF";
context.fillText("3",p3.x-2, p3.y+2);

context.fillStyle = "#000";
context.beginPath();
context.arc(p4.x,p4.y,9,0,Math.PI*2,true);
context.closePath();
context.fill();
context.fillStyle = "#FFFFFF";
context.fillText("4",p4.x-2, p4.y+2);

}

function drawScreen2() {

//draw the points

context.font ="13px sans";

context.fillStyle = "#000";
context.beginPath();
context.arc(p9.x,p9.y,9,0,Math.PI*2,true);
context.closePath();
context.fill();
context.fillStyle = "#FFFFFF";
context.fillText("9",p9.x-2,p9.y+2);

context.fillStyle = "#000";
context.beginPath();
context.arc(p10.x,p10.y,9,0,Math.PI*2,true);
context.closePath();
context.fill();
context.fillStyle = "#FFFFFF";
context.fillText("10",p10.x-2, p10.y+2);
}

var p1 = {x:668, y:220};
var p2 = {x:610, y:370};
var p3 = {x:565, y:490};
var p4 = {x:696, y:220};
var p5 = {x:750, y:370};
var p6 = {x:800, y:490};
var p7 = {x:635, y:415};
var p8 = {x:725, y:415};

var p9 = {x:635, y:415};
var p10 = {x:725, y:415};

theCanvas = document.getElementById('canvasOne');
context = theCanvas.getContext('2d');

setInterval(drawScreen, 513);
setInterval(drawScreen2, 765);
}``````

jsfiddle.net/karthikchandran/bn4kgov4 ..chk这个演示当我点击下一个按钮的下一个功能只是运行..我希望所有的功能我一个循环，迭代一次，当下一个按钮被点击..

1. 创建一个javascript对象的数组。 每个对象定义一个文本，它的定位。

``````var pArray=[];
pArray.push({text:'1',x:668, y:220});
pArray.push({text:'2',x:610, y:370});
...``````
2. 创建一个使用1个对象在其指定位置绘制文本的函数。

``````function drawCircleText(p){
context.fillStyle = "#000";
context.beginPath();
context.arc(p.x,p.y,9,0,Math.PI*2,true);
context.closePath();
context.fill();
context.fillStyle = "#FFFFFF";
context.fillText(p.text,p.x-2, p.y+2);
}``````
3. 当用户点击一个按钮时，用下一个对象调用绘图函数。

``````// variable to hold the index of the next object to display
var nextIndex=0;

// when the user clicks the button
\$('#next').click(function(){
// make sure we're not out of new text bubbles
// display the next text bubble
drawCircleText(pArray[nextIndex]);
// increment the index for next time
nextIndex++;
});``````

``````var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

// remove this...it's just so the demo will show the
// results which are far to the right
context.translate(-500,-200);

// Create an array of objects
// The each object defines text and its positioning
var pArray=[];
pArray.push({text:'1',x:668, y:220});
pArray.push({text:'2',x:610, y:370});
pArray.push({text:'3',x:565, y:490});
pArray.push({text:'4',x:696, y:220});
pArray.push({text:'5',x:750, y:370});
pArray.push({text:'6',x:800, y:490});
pArray.push({text:'7',x:635, y:415});
pArray.push({text:'8',x:725, y:415});
pArray.push({text:'9',x:635, y:415});
pArray.push({text:'10',x:725, y:415});

// variable to hold the index of the next object to display
var nextIndex=0;

// when the user clicks the button
\$('#next').click(function(){
// make sure we're not out of new text bubbles
// display the next text bubble
drawCircleText(pArray[nextIndex]);
// increment the index for next time
nextIndex++;
});

// Create an array that accepts the object definition
// and draws the text bubble
function drawCircleText(p){
context.fillStyle = "#000";
context.beginPath();
context.arc(p.x,p.y,9,0,Math.PI*2,true);
context.closePath();
context.fill();
context.fillStyle = "#FFFFFF";
context.fillText(p.text,p.x-2, p.y+2);
}``````
``#canvas{border:1px solid red;}``
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='next'>Next</button><br>
<canvas id="canvas" width=900 height=500></canvas>``````

``````// this string can easily be saved in a database
// or transmitted to another user
var myArrayAsString = JSON.stringify(pArray);``````

``````// recreate the same pArray from the saved string
var pArray = JSON.parse(myArrayAsString);``````