如何将函数存储到数组中并在javascript中循环遍历每个函数

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

在上面的代码中我想将drawscreen（）和drawsscreen2（）函数存储到一个数组中并循环显示每个函数的单独的行动点。 我该怎么做呢 任何人都可以帮我这个吗？

jsfiddle.net/karthikchandran/bn4kgov4 ..这个演示当我单击下一个按钮时，下一个函数只是运行..我希望所有函数循环并在单击下一个按钮时一次迭代一个.. < / p>

Answer 1

如何将函数存储到数组中：

var arrayOfFunctions = [];
arrayOfFunctions.push(function1);
arrayOfFunctions.push(function2);

如何遍历每个函数并运行它：

变式1：

for (var key in arrayOfFunctions) {
    arrayOfFunctions[key](); // run your function
}

变体2（相同）：

for (var i = 0; i < arrayOfFunctions.length; ++i) {
    arrayOfFunctions[i](); // run your function
}

变体3（相同，但IE＆lt; = 8版本不支持.forEach）：

arrayOfFunctions.forEach(function(func){
     func(); // run your function
});

变体4（相同，但是跨浏览器，需要jQuery）：

$.each(arrayOfFunctions, function(index, func) {
     func(); // run your function
});

Answer 2

迭代一系列函数并用参数

调用它们

迭代

   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: add, arguments:[2,5]},
      {fx: sum, arguments: [10,3]}
  ];

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

进一步说明

在JavaScript中调用函数有三种不同的方法

• 直接调用add(1,3);
• 使用function.call add.call(thisContext, 1, 3)
• 使用function.apply add.apply(thisContext, [1, 3])（与调用相同，但需要参数数组，请记住提示： a a pply 数组< / strong>）

Answer 3

你也可以这样做[object]：

var myObject = {
    fun1: function(){
        console.log(1);
    },

    fun2: function(){
        console.log(2);
    }
};

myObject.fun3 = function() {
    console.log(3);
};

for (var i in myObject) {
    myObject[i]();
}

希望它可以帮到你〜

Answer 4

按下第一个按钮后，按下10个按钮后按下

我想我会直接采取行动......

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
       if(nextIndex>=pArray.length){alert('No more!');return;}
       // display the next text bubble
       drawCircleText(pArray[nextIndex]);
       // increment the index for next time
       nextIndex++;
   });
   

示例代码和演示：

＆＃13;
＆＃13;
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
  if(nextIndex>=pArray.length){alert('No more!');return;}
  // 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);
}
＆＃13;
#canvas{border:1px solid red;}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

顺便说一句......

在javascript数组中定义bubble-texts的好处是，如果你需要保存/恢复这些定义，你可以使用以下命令轻松地将对象转换为文本：

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

稍后，您可以检索字符串并且＆＃34;再水合＆＃34;它回到了一个可用的javascript对象，如下所示：

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