9810


JavaScriptでボタンを押したときに動的に数字が足しこまれる過程を見たくて  
コードを描いているのですが、うまく表示できません。  
例：

[code]

    document.getElementById('button').onclick = function(){
     document.getElementById('output-text').innerHTML = 0;
     document.getElementById('output-text').innerHTML += 1;
     document.getElementById('output-text').innerHTML += 1;
     document.getElementById('output-text').innerHTML += 1;
     document.getElementById('output-text').innerHTML += 1;
     …
    }
    
[/code]

と書くと、output-textの箇所に０、１、２、３、４…と足しこまれる過程が見れると思ったのですが、  
実際には足しこまれる過程が見れません。  
そこでお伺いしたいのですが、PHPではflushと言う関数があり、画面に出力することが出来るのですが、  
JavaScriptにも同等の関数、または何かやりかたはありますでしょうか？  
よろしくお願いします。


CC BY-SA 3.0
2015-05-04T04:37:23.830
9809
2015-05-12T02:17:36.293
2015-05-04T10:34:31.177
49
7918
question
javascript
PHPで言うところのflush()のような処理はJavaScriptにありますでしょうか？


例のコードの場合、クリックされたときに一気に実行されているため表示されるのは4になってしまいます。そこで、遅延をさせるためにsetTimeoutという関数を使います。

下のコードはsetTimeoutを再帰的に呼び出す例ですが、ボタンをクリックすると1秒ごとに1ずつ増えていき、4になると止まります。

[code]

    
    var button = document.getElementById("button");
    var elem = document.getElementById("output-text");
    button.onclick = function () {
        elem.innerHTML = 0;
        setTimeout(function incr() {
            var num = parseInt(elem.innerHTML);
            if (num < 4) {
                num++;
                elem.innerHTML = num;
                setTimeout(incr, 1000);
            }
        }, 1000);
    }
    
    
    
[/code]

参考  
[window.setTimeout - Web API インターフェイス |
MDN](https://developer.mozilla.org/ja/docs/Web/API/Window/setTimeout)


CC BY-SA 3.0
2015-05-04T05:36:41.610
9810
2015-05-05T03:51:06.950
2015-05-05T03:51:06.950
5246
5246
9809
answer


人間の目で追えるぐらいにするには、setTimeout 等で間隔を空けながら順次インクリメントさせるのが良いと思います。

[code]

    document.getElementById('button').onclick = function() {
        var _value = document.getElementById('output-text').innerHTML;
        document.getElementById('output-text').innerHTML = (isNaN(_value)) ? 0 : parseInt(_value) + 1;
        clear = setTimeout(arguments.callee, 250);
    }
[/code]

[code]

    <button id="button">start</button>
    <div id="output-text">click "start"</div>
[/code]

<http://jsfiddle.net/turutosiya/vfzg4ygo/>


CC BY-SA 3.0
2015-05-04T08:16:10.600
9815
2015-05-04T08:16:10.600
2432
9809
answer


まずは、`flush()`について一言：PHPは専門でないので少し調べましたが、この関数は、ただPHPの実行が全て終える前にブラウザへ送信するだけです。理論上はコードの実行と結果の送信＆着信が理想的に速ければ、順に一気に４と表示されたように見えます。上記の例のコード同様です。

その代わりに、コードの実行の過程を見るために実行をわざと遅らせるためには、[この答え](https://stackoverflow.com/a/24488671/3471286)の`delay()`を使って下さい。引数はミリ秒単位です。

[code]

    function delay(ms) {
        var cur_d = new Date();
        var cur_ticks = cur_d.getTime();
        var ms_passed = 0;
        while(ms_passed < ms) {
            var d = new Date();
            var ticks = d.getTime();
            ms_passed = ticks - cur_ticks;
        }
    }
    
    document.getElementById('button').onclick = function(){
      document.getElementById('output-text').innerHTML = 0;
      delay(1000);
      document.getElementById('output-text').innerHTML += 1;
      delay(1000);
      document.getElementById('output-text').innerHTML += 1;
      delay(1000);
      document.getElementById('output-text').innerHTML += 1;
      delay(1000);
      document.getElementById('output-text').innerHTML += 1;
      …
    }
    
[/code]

一応言っておきますが、これの多様はメモリリークを引き起こす危険がありますので、人様が訪れるサイトでは絶対に使わないでください。特にスマフォンなどの低メモリ端末からのアクセスは危ないです。


CC BY-SA 3.0
2015-05-06T22:39:07.250
9871
2015-05-06T22:39:07.250
2017-05-23T12:38:55.307
-1
9623
9809
answer


画面の更新レートと比べ関数の処理時間は圧倒的に早いので、  
関数の内容の途中経過を画面に表示していくには、一旦処理をとめて戻って来るという仕組みが必要そうです。それをTimerで、人が変化がわかるスピードぐらいに落とし込んで実行していくとよいでしょう。

yield的なものを使うのが簡単そうですが、javascript1.7は、まだ実用的でなさそうなので、  
下記のような代用コードをかいてみました。

[code]

        <script>
    function driveGenerator(ar,cnt) {
        try{
        if ( cnt < ar.length ) {
            ar[cnt++]();
            window.setTimeout(driveGenerator,500, ar, cnt);
        }
        }catch(e){}
    }
    document.getElementById('button').onclick = function(){
        var countup = 0;
        driveGenerator([
            function(){
                document.getElementById('output-text').innerHTML = countup++;
            },
            function(){
                document.getElementById('output-text').innerHTML = countup++;
            },
            function(){
                document.getElementById('output-text').innerHTML = countup++;
            },
            function(){
                document.getElementById('output-text').innerHTML = countup++;
            },
        ],0);
    }
    </script>
    
[/code]

単純に、自分が経過の確認をしたいだけなら

[code]

    console.log()
    
[/code]

とか使ってみるのがよい気がします。


CC BY-SA 3.0
2015-05-12T02:17:36.293
10066
2015-05-12T02:17:36.293
9562
9809
answer