JavaScriptで遊ぶよ

Deferred.nextがDeferred.wait(0)にくらべてどのぐらい速いか

08:26

JSDeferred の Deferred.next と Deferred.wait(0) の違いを見るテストページ。

• http:/edv.sakura.ne.jp/product/junk/deferred/next.html

赤い四角が動く速さが変わるはず。

Firefox と Safari では Deferred.next を使うようにしてもスムーズ。Opera だと数十回に1回しかレンダリングを挟まなくなる。

Opera 9.64 の場合はスタックも分かれてないみたいなので、スクロールなども止まる。Deferred.next_faster_way_Image の目的を考えるとあんまりよろしくないかも。Opera 10 では一応スクロールはスムーズだが、数十回に1回しかレンダリングしないのは変わらない。

ソース。

<title>test</title>
switch to : <input type="button" onclick="change()" value="next_faster_way_Image"/>
<script type="text/javascript" src="jsdeferred.js"></script>
<script type="text/javascript">
  //<![CDATA[
  var flag = true;
  var hash = {'wait(0).next':'next_faster_way_Image','next_faster_way_Image':'wait(0).next'}
  function change(){
    var input = document.getElementsByTagName('input')[0];
    input.value = hash[input.value];
    flag = !flag;
  };

  window.onload = function(){
    var div = document.createElement('div');
    with(div.style){
      backgroundColor = 'red';
      position = 'fixed';
      height = '100px';
      width = '100px';
      top = '100px';
      left = 0;
    }
    document.body.appendChild(div);
    var left = 0;
    var direction = 1;
    Deferred.next(function(){
      left += direction*5;
      div.style.left = left+'px';
      if(left<0 || 800<left) direction *= -1;
      if(!flag) {
        Deferred.next(arguments.callee);
      } else {
        Deferred.wait(0).next(arguments.callee);
      }
    })
  }
  //]]>
</script>

ラベルが狂ってたのを修正。