如何循环函数数组并在单击时一次执行一个

how to loop array of functions and execute one at a time onclick

本文关键字：一次 执行 一个 单击 何循环 循环 函数 数组      更新时间：2023-09-26
var index=0;
function canvasp() { 
    var array_of_functions = [canvaspoint,canvaspoint1];
    array_of_functions[index++]('a string'); 
}

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

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

这把小提琴 http://jsfiddle.net/karthikchandran/hrvs4fzd/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做同样的事情只是为了保持一致性。

相关文章：