如何循环函数数组并一次执行一个onclick

Question

var index=0;

function canvasp() { 

    var array_of_functions = [canvaspoint,canvaspoint1];
    array_of_functions[index++]('a string'); 

}


<button onclick="canvasp()">Next</button>

在此代码中，我创建了一个包含两个函数的数组，并在单击按钮时递增数组。单击按钮时，第一个函数执行，如果再次单击，则执行第二个函数，但仍然保留第一个函数的操作。我需要只有一个函数可以在点击时执行并增加到第二个隐藏第一个..我尝试使用 for 循环但不工作任何人都可以帮忙

chk 这个小提琴http://jsfiddle.net/karthikchandran/hrvs4fzd/1/

Answer 1

如果您希望后续单击撤消前一个功能的效果，您需要一个知道如何做到这一点的功能。最简单的方法是将其包含在您的数组中（您应该将其 移出 canvasp 函数，顺便说一句）：

var index=0;
var array_of_functions = [
    canvaspoint,
    function(str) {
        undoCanvasPoint(str/* if needed */);
        canvaspoint1(str);
   }
];

function canvasp() { 

    if (index < array_of_functions.length) {
        array_of_functions[index++]('a string');
    }
}

更复杂的解决方案是拥有一组具有do 和undo 属性的对象，并使用前置增量而不是后置增量：

var index=-1;
var array_of_functions = [
    {
        "do": canvaspoint,
        "undo": undoCanvaspoint
    },
    {
        "do": canvaspoint1,
        "undo": undoCanvaspoint1
   }
];

function canvasp() { 
    if (index >= 0) {
        array_of_functions[index]["undo"]('a string if needed');
    }
    ++index;
    if (index < array_of_functions.length) {
        array_of_functions[index++]["do"]('a string');
    }
}

---

旁注：我将 do 放在引号中是为了对较旧的 JavaScript 引擎友好；当前的引擎符合当前的规范，只要它们是明确的属性名称，就没有将关键字作为属性名称的问题。 （然后我为undo 做同样的事情，只是为了保持一致。）