1

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

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;
 …
}

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

1
  • 申し訳ありません。参考のリンクが間違っていました。setTimeoutへのリンクにすべきでしたが、setIntervalになっていました。 Commented 2015年5月4日 6:24

4 件の回答 4

3

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

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


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);
}


参考
window.setTimeout - Web API インターフェイス | MDN

1

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

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);
}
<button id="button">start</button>
<div id="output-text">click "start"</div>

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

1

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

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

    <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>

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

console.log()

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

0

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

その代わりに、コードの実行の過程を見るために実行をわざと遅らせるためには、この答えdelay()を使って下さい。引数はミリ秒単位です。

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;
  …
}

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

2
  • スクリプトの実行中はUIスレッドがロックされますから、そのコードでは途中経過が見えません。もちろんユーザー操作も受け付けない(=ブラウザが固まる)ので、メモリリーク以前に実用的ではないです。 html5experts.jp/yoshikawa_t/1016
    – unarist
    Commented 2015年5月6日 23:04
  • 試してなかったですが、やはりそうなりますか。お邪魔してすみません。ブラウザを固めずにに、そしてDOMのリフレッシュができるこれの採用方を探してみます。 Commented 2015年5月6日 23:18

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。