按钮点击顺序切换多个功能

Question

我有一套独立的功能 - fn1(),fn2(),fn3(), fn4()。

我只需要一个功能同时运行，但功能要切换，在一个单一的点击按钮，在序列fn1() [点击进入] fn2() [点击进入] fn3() [点击进入] fn4() [点击]回fn1()

我该如何解决这个问题？

Answer 1

function fn1(){} 
function fn2(){} 
function fn3(){} 

var i = 1; 

function myclick(){ 
    if (i == 1) 
     fn1(); 
    elseif (i == 2) 
     fn2(); 
    elseif (i == 3) { 
     fn3(); 
     i = 1; 
    } 

    i++; 
} 

每次调用myclick时，它会运行一个fn，然后向i添加1。下一次运行第二个fn，然后是第三个。

Answer 2

如果我已经理解了您要做的事情，您希望在单个元素上连续点击时运行不同的功能。

要做到这一点，你可以把每个功能在一个数组，然后通过每一个使用模运算符返回数组的开始运行一旦达到了目的，是这样的：

var functions = [function() { 
 
    console.log('first'); 
 
}, function() { 
 
    console.log('second'); 
 
}, function() { 
 
    console.log('third'); 
 
}, function() { 
 
    console.log('fourth'); 
 
}]; 
 

 
$('button').click(function() { 
 
    var i = ($(this).data('i') + 1) || 0; 
 
    functions[i % functions.length](); 
 
    $(this).data('i', i); 
 
}); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Click me</button>

Answer 3

您可以使用闭包来跟踪要执行的功能。

HTML：

<button type="button" onclick="foo()"></button> 

JS：

var foo = (function() { 
    var funcIndex = 0; 
    return function() { 
     switch(funcIndex) { 
      case 0: func1(); break; 
      case 1: func2(); break; 
      case 2: func3(); break; 
      case 3: func4(); break; 
     } 

     funcIndex = (funcIndex+1) % 4; 
    } 
})(); 

Answer 4

你可以试试这个方法：

function fn1() 
{ 
    //do something 
    $("#myButton").off("click"); 
    $("#myButton").click(fn2); 
} 

function fn2() 
{ 
    //do something 
    $("#myButton").off("click"); 
    $("#myButton").click(fn3); 
} 

function fn3() 
{ 
    //do something 
    $("#myButton").off("click"); 
    $("#myButton").click(fn4); 
} 

function fn4() 
{ 
    //do something 
    $("#myButton").off("click"); 
    $("#myButton").click(fn1); 
} 

$("#myButton").click(fn1); 

Answer 5

arr=[fn1,fn2,fn3,fn4]; 
var i=0; 
$("buttonId").click(function(){ 
    arr[i%4](); 
    i++; 
}) 

Answer 6

<button onclick="toogle()">Click Me</button> 

然后

var index = 0; 
var funcArr= [f1,f2,f3,f4]; 
function toogle(){ 
    funcArr[index](); 
    index++; 
    index = index%funcArr.length; 
} 

function f1(){console.log("f1")}; 
function f2(){console.log("f2")}; 
function f3(){console.log("f3")}; 
function f4(){console.log("f4")}; 

https://jsfiddle.net/8chvusaq/