使用 javascript 单击按钮时如何在两个不同的功能之间切换？

Question

点击按钮我调用这个函数

toggleFunction(){
    //Do something here to toggle between function A and function B
}

A(){} //Call this first
B(){} //Call this after

如何以简单的方式在 javascript 中实施？

提前致谢！

Answer 1

您必须使用变量来管理切换：

var toggle = true;

toggleFunction(){
    toggle ? functionA() : functionB();
    toggle = !toggle;
}

functionA() {}
functionB() {}

Answer 2

设置一个 lastInvokedIndex 属性来保存最后调用的方法名

btn.addEventListener( "click", function(e){
  var methodsToInvoke = [ A, B ];
  var el = e.currentTarget;
  //el.lastInvokedIndex = el.lastInvokedIndex || 0;
  el.lastInvokedIndex = el.lastInvokedIndex >= methodsToInvoke.length ? 0 : (el.lastInvokedIndex || 0);
  methodsToInvoke[el.lastInvokedIndex++]();
});

演示

var A = () => { console.log("A") };
var B = () => { console.log("B") };

var btn = document.querySelector( "button" );

btn.addEventListener( "click", function(e){
  var methodsToInvoke = [ A, B ];
  var el = e.currentTarget;
  //el.lastInvokedIndex = el.lastInvokedIndex || 0;
  el.lastInvokedIndex = el.lastInvokedIndex >= methodsToInvoke.length ? 0 : (el.lastInvokedIndex || 0);
  methodsToInvoke[el.lastInvokedIndex++]();
});

<button>Click</button>

Answer 3

正如@Faly 所说，您需要一个变量来切换。

新方法是用 ~~ 将 boolean 转换为 number。

function A() {console.log('A');
function B() {console.log('B');
var funcs = [A,B]; 
var bool = false; 
function toggleFunction() { 
  funcs[~~bool](); 
  bool = !bool; 
}

使用 javascript 单击按钮时如何在两个不同的功能之间切换？

How to toggle between two different functions when a button is clicked using javascript?

javascript

function

toggle