Jquery 複数の関数を順番に実行することはできるか？

Question

jqueryを使って画像の切替をクリックイベントで順番に切り替えたい。

$(div.xxx).click(function(){
    funcA();
    funcB();
    funcC();
    .... //A⇒B⇒C⇒A⇒B⇒Cのような感じでクリックするたびに実行する関数を変更したい。
});


function funcA(){
    //画像A表示
});

function funcB(){
   //画像B表示
});

function funcC(){
   //画像C表示
});

色々探してみたのですが、やり方が見つからず・・・。

clickイベントで順番に関数を実行する方法はありませんでしょうか。

良い方法があれば、ご教示ください。

Comments

[m.ts10806]

現状のコードの問題点は何でしょうか

Answer 1

こんなんも。

const cyclicExecutor = (...fns) => {
  let i = 0;
  
  const operator = (...params) => {
    const rtn = fns[i](...params);
    if (fns.length === ++i) i = 0;    
    return rtn;    
  };
  
  const reset = () => {
    i = 0;
  }
  
  return [operator, reset];
}

とかゆう、引数として、順番に実行したい複数の関数を受け取り、それらをサイクリックに実行する関数と、次に実行する関数を先頭にもどす関数の２つのクロージャーを返す関数を作っておくやんか。ほんで、

const [operator, reset] = cyclicExecutor(funcA, funcB, funcC);

としておけば、operator() として operatorを呼ぶ度にfuncA, funcB, funcCがサイクリックに実行されます。reset()すると、次に実行する関数を先頭のfuncAに戻します。operator() の実行時には引数も渡せるよってに。

➡ サンプル ：ボタンをクリックされるたびに、aとbの(1)和、(2)積、(3)最大値、(4)割り算したときの商と余り、の4つをサイクリックに実行してその結果を表示します。数字を変えると次に実行する関数を(1)和に戻します。

別のやり方

もうひとつ別やり方を挙げときます。

たとえば、3つの関数 foo(), bar(), baz() をこの順にサイクリックに呼びたいとしましょか。このときに、これらを実行させるトリガーとなるHTMLの要素に、それをクリックしたときに実行させたい関数の名前を、何らかの data-属性で持たせるんや。たとえば data-func としましょう。（もっと良い属性名のネーミングがあるかも）

こんな感じになるで。

<div class="container">
  <div class="button" data-func="foo">foo</div>
  <div class="button" data-func="foo">foo</div>
  <div class="button" data-func="foo">foo</div>
</div>

  const funcs = {
    foo() {
      console.log('foo() が呼ばれました。');
      return 'bar';
    },   
    
    bar() {
      console.log('bar() が呼ばれました。');
      return 'baz';    
    },
    
    baz() {
      console.log('baz() が呼ばれました。');
      return 'foo';  
    }
  }
  
  $('div.button').click(function () {
    const name = $(this).attr('data-func');    
    if (funcs[name]) {
      const nextFunc = funcs[name]();    
      $(this).attr('data-func', nextFunc).text(nextFunc);
    }
  });

ポイントとしては、

• 3つの関数をひとつのオブジェクト funcsのプロパティとして持たせて、funcs[name]でその関数を参照していること。
• 各関数は、次に実行するべき関数名の文字列を返すこと。（たとえば foo() は文字列'bar'をreturnする)
• 関数の実行後に、当該HTMLのdata-func属性に、次に実行する関数名を設定すること。

の３つです。
このやり方のメリットとして、

• 各クリック要素のそれぞれに個別に、foo → bar → baz → foo → ・・・　のサイクルを維持させるために、何らかのコード追加をする必要がない。
• 追加したdata-属性の値に応じたスタイルを適用できる。こないな感じで。

.button[data-func='foo'] {
  background-color: blue;
}

.button[data-func='bar'] {
  background-color: red;
}

.button[data-func='baz'] {
  background-color: green;
}

➡ サンプル

Answer 2

<script>
$(function(){
  const picChanger = (function *() {
    yield funcA();
    yield funcB();
    yield funcC();
  })();
  $('#xxx').click(function(){
    picChanger.next();
  });
  function funcA(){
    console.log('A');
  }
  function funcB(){
    console.log('B');
  }
  function funcC(){
    console.log('C');
  }
});
</script>
<div id="xxx">xxx</div>

Answer 3

<script>
$(function(){
  var funcs=[funcA,funcB,funcC];
  var num=0;
  $('#xxx').click(function(){
    funcs[num]();
    num++;
    if(num>=funcs.length) num=0;
  });
  function funcA(){
    console.log('A');
  }
  function funcB(){
    console.log('B');
  }
  function funcC(){
    console.log('C');
  }
});
</script>
<div id="xxx">xxx</div>

Comments

[dera]

ありがとうございます。
とてもシンプルなロジックで、今の私での習熟度でも理解することができ、実際に動作確認まで行えました。

今回はこちらの方をベストアンサーとさせていただきます。