Call multiple functions but one after another with each onClick of same button in js-CodePudding

I have a button with a click event called handleCount(). I have 3 functions, fun1(), fun2(), fun3(). I'm calling fun1(), fun2(), fun3() in handleCount() based on count value.

If count value is 0 then fun1 should be called, if count value is 1 then fun1() and fun2() should be called and if count value is 2 then fun1(), fun2(), fun3() should be called and its working as expected.

The issue is that I want them to be called one after another with each click like when count === 2 then fun1() should be called first and then on 2 click fun2() should be called and for 3rd click fun3() should be called.

How can I achieve this? I would like to know logic to implement this.

Note I'm not incrementing/decrementing count value because I get count value from an API.

var count = 2;

const function1 = () => {
  console.log("Function one");
}

const function2 = () => {
  console.log("Function two")
}

const function3 = () => {
  console.log("Function three")
}

const handleCount = () => {
  if (count === 0) {
    function1();
  }
  if (count === 1) {
    function1();
    function2();
  }
  if (count === 2) {
    function1();
    function2();
    function3();
  }
}

return (
  <>
   <button onClick={handleCount}></button>
  </>
)

CodePudding user response：

If I get you correctly at count === 2 you want to call each of 3 functions. So you can do it as simple as it is possible.

if(count > -1) fn1()
if(count > 0) fn2()
if(count > 1) fn3()

CodePudding user response：

So you need a switch case. (omitting the break you tell the code to not exit the switch)

switch(count) {
  case 3:
    function3();
    
  case 2:
    function2();

  default:
     function1();
}

// count = 3 --> function3();
// count = 1 --> function1(); function2(); function3();

CodePudding user response：

My understanding is that you want to call a single function each time you click the button. The first time you click the button it will call a function corresponding to a count you get from the API. Subsequent clicks will call the next numbered function.

To do this I would keep track of how many times the button has been clicked.

    const fn1 = () => console.log("1")
    const fn2 = () => console.log("2")
    const fn3 = () => console.log("3")
    
    
    const count = 3
    let clicks = 0
    const functions = [fn1,fn2,fn3]
    const functionsHighestIndex = functions.length - 1
    function handleClick(){
        let countWithClicks = count - 1   clicks % functions.length
        const indexOfFunctionToCall = countWithClicks > functionsHighestIndex ? countWithClicks - functions.length : countWithClicks
        functions[indexOfFunctionToCall]()
        clicks  =1
      }
      
      const button = document.getElementById("button").addEventListener("click", handleClick)

<button id="button">Button</button>