10408


**現状**  
・挙動は問題ないのですが、ループ数だけ関数が必要なので簡潔に書きたい

[code]

    function loop1(){
      if(条件分岐){
        window.requestAnimationFrame(loop2);
        return;
      }
      window.requestAnimationFrame(loop1);
    }
    function loop2(){
      if(条件分岐){
        window.requestAnimationFrame(loop1);
        return;
      }
      window.requestAnimationFrame(loop2);
    }
    window.requestAnimationFrame(loop1);
    
[/code]

* * *

**やりたいことのイメージ**  
・requestAnimationFrameの引数では、コールバック関数に引数を渡せないようですが、同等内容にするにはどうすれば良いでしょうか？  
・最終的にやりたいことは、現状2つある関数を1つにしたいことなので、別に下記イメージではなくても構いません  
※条件分岐はループ内容に依存しています

[code]

    function loop(n){
      if(条件分岐){
        window.requestAnimationFrame(loop(2));
        return;
      }else if(条件分岐){
        window.requestAnimationFrame(loop(1));
        return;
      }
      if(条件分岐){
        window.requestAnimationFrame(loop(1));
      }else if(条件分岐){
        window.requestAnimationFrame(loop(2));
      }
    }
    window.requestAnimationFrame(loop(1));
    
[/code]


CC BY-SA 3.0
2015-05-20T02:52:48.457
10399
2015-05-21T07:19:58.337
7886
question
javascript
requestAnimationFrameの引数で指定するコールバック関数に、引数を渡したい


`bind()` してください。単純にやるなら、

[code]

    requestAnimationFrame(loop.bind(null, 2));
    
[/code]

のように書き換えます。

こういう場合は状態を管理するオブジェクトを作って、そのオブジェクトのメソッドを rAF に渡すほうがよりJavaScriptらしいと思います。

[code]

    var Animator = function() {
      this.state = 0;
      this.boundOnAnimationFrame = this.onAnimationFrame.bind(this);
      requestAnimationFrame(this.boundOnAnimationFrame);
    };
    Animator.prototype.onAnimationFrame = function() {
      if (条件分岐) {
         this.state = 2;
      } else if (条件分岐) {
         this.state = 1;
      }
      ...
      requestAnimationFrame(this.boundOnAnimationFrame);
    };
    
[/code]


CC BY-SA 3.0
2015-05-20T04:52:41.973
10408
2015-05-20T04:52:41.973
3475
10399
answer


クロージャで対応するのは如何でしょうか？

[code]

    $(function(){
      
      function loopStart(conditions){
        var repeat = true;
        
        var loop = function(){
          $('<div></div>').text('条件:' + conditions + '[' + repeat + ']' ).appendTo('body');
          
          if(repeat){
            repeat = false;
            window.requestAnimationFrame(loop);
          }  
        }
        window.requestAnimationFrame(loop);
      }
      
      $('#btn1').click( function(){ loopStart('btn1') } );
      $('#btn2').click( function(){ loopStart('btn2') } );
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <button id="btn1">条件1</button>
    <button id="btn2">条件2</button>
[/code]


CC BY-SA 3.0
2015-05-21T07:19:58.337
10452
2015-05-21T07:19:58.337
4191
10399
answer