javascript の whileのbreakの確認

Question

下記コードはwindowをリサイズした時にplotを再コールするコードです。
再コールする際は一旦whileをbreakさせて、breakの確認後にplot()を呼ぶようにしているつもりです。
breakを確認しているのがfbr()です。setIntervalで1ミリ秒ごとにbreakのフラグのbrが1になったかを確認しています。
brが1になったのを確認してからplot()を再コールしています。
またsetInterval動作時はリサイズされてもreturnさせています。setIntervalが複数動作しないようにするためです。

ここで質問なのですが、最初setIntervalの秒数を10にしていました。それだとwindowのリサイズ動作をやりまくるとタイミングによってsetIntervalが止まらないことがありました。それで、setIntervalの秒数を1にしたらちゃんと止まるようになりました。たまたま止まっているのでしょうか？
下記のようにwhile(true)をちゃんとbreakしてからplot()を再度呼ぶようにするもっといい方法があるでしょうか？

function delay(sec) {
    return new Promise(resolve => setTimeout(resolve, sec));
}

let br = 0, ft = 0, move = 0;

plot();

async function plot(){
    br = 0, ft = 0, move = 0;　// 変数を全部 0 にする
    while(true){
　　　　　await delay(10);
        //何かの処理
        if (ft) { //  whileをbreakさせる
          break;
        }
        //console.log("plot"); // breakしたかを確認する時 
    }
    br = 1; // breakしたら br を 1 にする
}

window.addEventListener("resize",function(){
    if(move)return; // Interval動作中は return させる
    ft = 1;
    const id = setInterval(fbr, 1);//ここを10にするとIntervalが止まらないことがある
    function fbr(){
        move = 1; // Interval動作フラグのmoveを 1 にする
        if(br === 1){ // breakを確認する
            clearInterval(id); //breakを確認したら Interval を解除する
            plot();
        }
        //console.log("fbr"); // Intervalが止まるかを確認する時
    }
})

setIntervalを10にすると、10ミリ秒未満に再びrisizeされるとsetIntervalが呼ばれて複数のIntervalが動くことになるのは解りました。
それではsetIntervalを1にしても1ミリ秒未満にrisizeが呼ばれれば同じことなのでしょうか。
他にいい方法はないでしょうか

教えてもらった参考コード。

let resol; //JavaScrptの基礎が解ってないのですが、これをコメントアウトしても動きます。なぜでしょうか？
plot();
async function plot(){
    let i = 0;
    while( true ){ // 永遠と繰り返す
        //何かの処理
        console.log(i++);//動作を確認
        if( await new Promise( resolve => {
                resol = resolve
                setTimeout( () => { resolve( false ) }, 1000 );
        } ) ){ break };
     }
}

window.addEventListener("resize",function(){
    resol( true ); //whileをbreak
    plot();
});

Comments

[Lhankor_Mhy]

「何かの処理」は同期処理ですか？非同期処理ですか？

[Lhankor_Mhy]

質問の編集拝読。そもそもplotが非同期なのですね。

[takahashi-one]

何かの処理は、canvasに描画するアニメーションです。
例えば車のタイヤを永遠と回すとかです。

[think49]

要件をはっきりさせて下さい。

「plot() 実行中に新しい plot() を実行予約しない」

で合っていますか。
正直、setInterval() の必要性は疑問なのですが…。

[Lhankor_Mhy]

setInterval を抜けないということは、br != 1 ということでしょうから、普通に考えると plot の中で無限ループしているのではないかな、と思いますが。

[think49]

おそらく、resizeイベントの動きに認識齟齬があります。

window.addEventListener("resize",event)>console.log),false);

を確かめるだけで、自己解決に至る気がしないでもありません。

[Lhankor_Mhy]

「setIntervalが止まらないことがありました」とのことですが、具体的にはどのような現象が起きたのですか？
つまり、どのようにして「setIntervalが止まらないこと」を確認したのか、ということが知りたいです。

[takahashi-one]

whileは抜けるのですが、setIntervalで呼ぶfbr()が呼ばれ続ける時があります。
両方console.logで確認しました。

[think49]

再度、書きますが、要件は「plot() 実行中に新しい plot() を実行予約しない」で合っていますか。

[takahashi-one]

はいその通りです。何かいい方法がありますでしょうか。

[think49]

回答のサンプルコードを参照して下さい

[takahashi-one]

すいません。ちょっとニュアンスが違ったかもしれません。
plot()はwhile(true)になっているので永遠に実行中です。
whileの重複実行を避けるためplot()を停止(whileをbreak)させて再度plot()を実行するというのが目的です。
実力がないので解らないのですが回答のサンプルコードはこの目的を達成してますでしょうか？

[takahashi-one]

追加ですが、質問のコードはwhileの重複実行とsetIntervalの重複実行の二つをどうにかしなければと言う目的があります。

[think49]

JavaScriptは原則として、シングルスレッドの為、重複実行を防ぐロジックは必要ありません。
つまり、plot()実行中に余所の処理が割り込む可能性はありません。

ServiceWorkerを使うと、マルチスレッドが可能なようですが、使用してないですよね？

[think49]

割り込まれるのは、一つの「処理の塊」からもう一つの「処理の塊」に移るときです。
一連の処理がひとかたまりになっているのなら、その処理は他に邪魔されることなく、連続して実行されます。

[think49]

「resizeで監視->setIntetvalで監視->while(true)で監視」

連鎖的に監視処理を増やしていますが、その意図はどこにあるのでしょう。
resizeが実行開始のトリガーなら、それだけで十分に思うのですが、監視ロジックが3つ必要なのでしょうか。
それぞれの「ロジック」と「必要性」を説明出来ますか。

[takahashi-one]

すいません。よく解らないのですがwhileのbrak処理をせずplot()を複数回呼べばたくさんのwhileが動作してしまうのではないでしょうか？

[takahashi-one]

while(ture) while(ture) while(ture) while(ture) ... のように直線的に実行されていると思うのですが。こえを防いでるつもりなのですが。

[think49]

連続実行される理屈は回答で説明しました。

[takahashi-one]

はい、setIntervalにsetした秒数未満でrisizeに入ると再び呼ばれると言うのは解りました。
plot()動作中にplot()を呼ばないようにすれば連続実行は防げますが、そうなるとplot()はwhile(true)なので永遠に再度呼ぶことはできません。plot()を停止させて再コールし、かつ連続実行を防ぐというつもりなのですが何か理解が間違っているのでしょう。ちょっと自分で考えます。ありがとうございました。

[Lhankor_Mhy]

> takahashi-oneさん

そのご理解で合っていると思います。
当方でご提示のコードを（無限ループを抜けるように変更して）試してみましたが、「setIntervalが止まらない」という現象を確認できませんでした。0を1000にしても停止します。

ですので、ご提示いただいている部分以外のコードに問題があるのだと思います。

[Lhankor_Mhy]

あるいは、takahashi-oneさんの環境で、ご提示のコード**だけ**で問題が再現するのであれば、環境の問題であるのかもしれません。

[think49]

@takahashi-one さん
「plot()動作」と「plot()を呼び出すタイマー動作」「setIntervalの呼び出し」はそれぞれ独立しています。

まず、setIntervalを廃止し、「plot()動作」と「plot()を呼び出すコード」に変更します。
そして、「plot()を呼び出すコード」で「plot()が動作中であれば、plot()を呼び出さない」という動作で要件を満たせると私は考えました。

[think49]

私は「plot()動作」は本問題に無関係と判断しています。
「plot()実行中の呼び出しを防ぐ」のが目的であれば、「plot()実行中の動作」は何でも良いはずです。
plot()実行中に新しくplot()が呼び出されなければ良いのです。

もしくは、私がcount-down.jsで実装したのと同様に「plot()実行開始時にbusyフラグがtruthyであれば、実行を中断させれば良い」でしょう。
その判定はplot()の実行開始時であって、実行中の動作は何でも良いはずです。
https://gist.github.com/think49/10d745ebf9aef92b40e698af695f5d2c

[think49]

@takahashi-one さん
> plot()はwhile(true)になっているので永遠に実行中です。

これが真実ならば、2回目のplot()の実行は永遠に来ない動作が期待されるので、

window.addEventListener("resize",plot,{once: true});

のように、1度だけplot()を呼び出すコードに変更すれば、要件を満たせる事になります。

[takahashi-one]

大変申し訳ありません。私の説明不足のような気がします。長々つきあわせてしまい申しわけありません。ちょっと前にニュアンスが違ったかもしれないと書きましたが、例えば1からカウントアップして、その数値を永遠に表示しているとします、その途中でresizeイベントがあったらまた1から表示しなおすと言うのが1つ目の目的です(数値をグローバル変数にしてresizeで0にすればと言うのはなしで、例えで書いたので)。停止させる過程でplot()の実行中はplot()を実行させないのが２つ目の目的です。
自分のコードよりその動作を簡単に実現できる方法を教えてもらいました。
質問に追加掲載したので、よかったら批評してください。

[think49]

@takahashi-one さん
回答しましたが、追加質問をしておいて、要件にそぐわない回答をベストアンサーに選ぶ対応は大いに疑問です。
https://teratail.com/questions/272737?reply=true#reply-390152

Answer 1

質問の方向性が180度変わった為、新しく回答します。
旧回答は旧要件に沿った回答です。

要件の修正

[修正依頼] より引用します。

takahashi-one 2020/06/28 10:03
大変申し訳ありません。私の説明不足のような気がします。長々つきあわせてしまい申しわけありません。
ちょっと前にニュアンスが違ったかもしれないと書きましたが、例えば1からカウントアップして、その数値を永遠に表示しているとします、
その途中でresizeイベントがあったらまた1から表示しなおすと言うのが1つ目の目的です
(数値をグローバル変数にしてresizeで0にすればと言うのはなしで、例えで書いたので)。
停止させる過程でplot()の実行中はplot()を実行させないのが２つ目の目的です。

それを今いわれると、ちゃぶ台返しにしか思えないのですが…。

• ちゃぶ台返し - Wikipedia

転じて、この「ちゃぶ台返し」が理不尽な様子から、トップが強権を使い、企画・仕様などをご破算にしてやり直させることを「ちゃぶ台返し」と称することがある。例えば任天堂のゲームクリエイター・宮本茂はゲーム作りへのこだわりから、ほぼできあがったものを大幅にやり直させることがしばしばあり、自らそれを「ちゃぶ台返し」と呼んでいる（英：Upending the Tea Table[1]、宮本茂#ちゃぶ台返しも参照）。

あなたは下記要件が正しいと返答したではありませんか。

think49 2020/06/25 18:32
再度、書きますが、要件は「plot() 実行中に新しい plot() を実行予約しない」で合っていますか。

takahashi-one 2020/06/25 23:20
はいその通りです。何かいい方法がありますでしょうか。

私のその要件に従い、コードを書きました。

• JavaScript - javascript の whileのbreakの確認｜teratail

しかし、今回出てきた新情報「例えば1からカウントアップして...」から推察するに、正しい要件は下記に思えます。

「plot() 実行中に新しい plot() の実行命令が発行された場合、既存処理を中断して初めからやり直す」

「plot() の処理が常に一つで重複しない性質」は同じですが、中身は全くの別物です。

私が [修正依頼] で要件を確認した際に、なぜ否定してくれなかったのでしょうか？
これでは私の回答は「骨折り損のくたびれもうけ」です。

問題解決の為に必要なこと

下段の回答を読む前に読んでください。
現象を再現可能なコードを提出できないのであれば、あなたに必要なのは回答から

• 問題解決の為に必要な原理
• 対象コードの必要性

を読み取り、自分のコードに反映する事です。

追記されたコードを読みましたが、[修正依頼] で書いた

think49 2020/06/26 13:48
JavaScriptは原則として、シングルスレッドの為、重複実行を防ぐロジックは必要ありません。
つまり、plot()実行中に余所の処理が割り込む可能性はありません。

ServiceWorkerを使うと、マルチスレッドが可能なようですが、使用してないですよね？

think49 2020/06/26 13:56 編集
割り込まれるのは、一つの「処理の塊」からもう一つの「処理の塊」に移るときです。
一連の処理がひとかたまりになっているのなら、その処理は他に邪魔されることなく、連続して実行されます。

を理解する必要性を感じました。

---

情報の取捨選択はなれないと難しいですが、teratailにはガイドラインが有ります。

• 質問するときのヒント｜teratail（テラテイル）

全て守れば、相当な情報量になったはずです。

そうした説明に苦労を感じるようであれば、現象を再現可能な最小限のコードを書きましょう。

• 再現可能な短いサンプルコードの書き方 - ヘルプ センター - スタック・オーバーフロー

 //何かの処理

「何かの処理」は何でも良いということであり、あなたの期待に反してそこに重要な動作が隠されているかもしれません。
秘密情報は伏せるべきですが、動作確認に必要な情報は全てコードに落とし込み、現象を再現可能なサンプルコードを作ることが重要です。

そして、当然ながら要件を必ず書きましょう。
あなたが期待する動作が伝わらない事による時間浪費問題は身を持って知ったはずです。

---

そして、回答を貰ったら、回答内容をどのように理解して、何をしたのか、を書いてください。
私の旧回答に無反応だったこともそうですが、他の方の回答へのコメントを読んでも、回答を十分に理解したようには読めません。

暗黙のグローバル変数

let resol; //JavaScrptの基礎が解ってないのですが、これをコメントアウトしても動きます。なぜでしょうか？

"use strict"; を宣言すれば、あなたの期待通りに動作しません。
Strict Modeでなければ、「未定義変数名への代入」は暗黙のグローバル変数として扱います。

• var - JavaScript | MDN

逐次処理

let resol; //JavaScrptの基礎が解ってないのですが、これをコメントアウトしても動きます。なぜでしょうか？
plot();
async function plot(){
    let i = 0;
    while( true ){ // 永遠と繰り返す
        //何かの処理
        console.log(i++);//動作を確認
        if( await new Promise( resolve => {
                resol = resolve
                setTimeout( () => { resolve( false ) }, 1000 );
        } ) ){ break };
     }
}

window.addEventListener("resize",function(){
    resol( true ); //whileをbreak
    plot();
});

Promiseを使うなら逐次処理が必要ですが、説明が大変なので割愛します。
詳細は下記サイトを参照してください。

• 4.8. Promiseによる逐次処理 - JavaScript Promiseの本

修正方針

[修正依頼] で述べたことと関連しますが、非同期処理一つ(new Promise一つ)で一つの処理ブロックとなり、その処理中は他の処理を受け付けません。

• 中断したい範囲の処理単位で一つの非同期処理を定義し、resize イベントハンドラで進捗管理している変数orプロパティの値を変更する必要があります。
• 基本的に、setTimeout を使用するならば、再帰的に呼び出しをすれば十分であり、while(true) も不要なはずです。

'use strict';
const handleTimeout = function handleTimeout (delayTime, plot) {
  console.log(plot.countUp());
  setTimeout(handleTimeout, delayTime, delayTime, plot);
};

class Plot {
  constructor (startCount, delayTime) {
    this.startCount = startCount;
    this.currentCount = startCount;
    this.delayTime = delayTime;
    this.busy = false;
  }
  countUp () {
    return this.currentCount++;
  }
  start () {
    this.busy = true;
    setTimeout(handleTimeout, this.delayTime, this.delayTime, this);
  }
  reset () {
    this.currentCount = this.startCount;
  }
}

window.addEventListener('resize',{plot: new Plot(1, 1000), handleEvent: function handleResize (event) {
  const plot = this.plot;
  plot.busy ? plot.reset() : plot.start();
}}, false);

原理的には、前回答で使用した count-down.js とほぼ同じです。
異なるのは、reset() のロジックを追加した事です。

• count-down.js

Re: takahashi-onev さん

Comments

[takahashi-one]

回答ありがとうございました。次からは言われたことに気を付けて質問します。
最終コードありがとうございました。

[takahashi-one]

[過去24件のコメントを表示]を今読み返して、気付かなかったコメントがありました。
2020/06/26 14:04 のコメントは今気づきました。
たぶん 2020/06/26 13:56 のコメントを見て、
考え返答している間に14:04のコメントがきて気付かなかったと思われます。
無視のような状態になってしまい大変失礼しました。

Answer 2

実行フラグ

下記要件と仮定します。

「plot() 実行中に新しい plot() を実行予約しない」

必要なのは、実行フラグです。

1. plot()の実行フラグをfalseにする
2. plot()の実行開始時に実行フラグをtrueにする
3. 再度、plot()が呼び出された場合、実行フラグがtrueなら何も実行せずに終了する

setInterval

resizeイベントハンドラでsetIntervalを呼び出すということは、タイマー処理されるまでに待機時間が発生するということです。
タイマー処理処理が実行される前に、resizeイベントハンドラが呼び出されたなら、フラグ変更前なので実行は許可されます。

setIntervalで待ち時間を1に設定すると、不具合を回避出来るのは、待機時間が短すぎて、次の実行前にフラグ変更が完了しているsetIntervalのタイマー処理がキュー処理で、先行キューが完了してから後続キューを実行するからでしょう。

サンプルコード

• Plunker - 非同期実行中に新規実行命令を破棄する

Re: takahashi-onev さん

Comments

[Lhankor_Mhy]

横からすみません。

>タイマー処理処理が実行される前に、resizeイベントハンドラが呼び出されたなら、フラグ変更前なので実行は許可されます。

とのことですが、待ち時間中に起きたイベントもタイマー処理のキューに積み上げられます。
一方で、plot関数は microtasks のキューに積まれます。
ですから、後から発火したイベントのタイマーより、plot関数が先に解決されるはず（つまり、フラグの変更に先行してイベントのタイマーが処理されることはない）ではないかと思うのですが、いかがでしょうか。

[Lhankor_Mhy]

さらに言えば、「フラグ変更前なので実行は許可され」た場合、直前の行で clearInterval() が実行されているはずですから、「setIntervalが止まらない」という現象と整合しないと思います。

[think49]

@Lhankor_Mhy さん
resize>setInterval->タイマー処理->plotの順に実行されます。
ここでsetIntervalで1000ミリ秒の遅延を発生させた場合、plotが実行されるまでに1秒間の猶予があります。
その1秒間の間にresizeイベントが連続発火すれば、タイマー処理は連続して登録されます。

clearIntervalが実行されるのは「1秒後」なので、タイマー処理が連続して登録される事象を防ぐことは出来ません。
Lhankor_Mhyさんが認識されている通り、setIntervalのタイマー処理はキューなので、先行のタイマー処理があれば、そちらが完了してから、後続タイマー処理を実行します。
先行のタイマー処理が完了した時点で実行フラグは解除される為、連続実行を回避出来ない状況と推察できます。

[Lhankor_Mhy]

ありがとうございます。
setIntervalが連続実行されることを回避できないことには同意しますが、私はそういう質問ではないと読みました。

[think49]

@Lhankor_Mhy さん
差し支えなければ、回答にして頂けると幸いです。

[Lhankor_Mhy]

補足依頼にも書きましたが、問題が再現しないので回答のしようがないのです。

[think49]

@Lhankor_Mhy さん
再現は難しいですが、要件が確定しているのなら、「要件を満たすコード」は掲示できると考えています。
私は「実行中の動作」は無関係なので何でも良いと考え、取り急ぎ、count-doun.jsを作りました。

[Lhankor_Mhy]

それはそれでよろしいと思いますが、think49さんがご提示した回答が要件を満たすことと、質問で提示されたコードが要件を満たさないことは、また別の話ではないでしょうか？
そこに私が要件を満たすコードを追加したところで、状況は変わらないのではありませんか？

私が書いているのは、質問で提示されたコードが要件を満たしているのでは？（ほかに原因があるのでは？）ということです。

[Lhankor_Mhy]

ああ、いや、そうか、なるほど、「setIntervalが止まらない」ことと、「plot() 実行中に新しい plot() を実行予約しない」は、別の話なのですね。

つまり、「要件が確定」した後は、「setIntervalが止まらない」などはどうでもいい話なのですね。
理解しました。私は手を引いた方がよさそうですね、失礼しました。

[think49]

@Lhankor_Mhy さん
厳密には、再現コードを出してもらい、回答者環境で再現させて回答するのが本筋だと思います。

私が始めに要件に拘ったのは、「無関係なコードと事象」を排除して、回答範囲を最小限に絞り込むのが目的でした。
「setIntervalが止まらない」や「while(true)」は無関係なので排除してましたが、少なくとも質問者さんは関係ある認識で、こちらの意図が伝わっていなかったように思います。

ただ、やはり、お互いに共通認識を持つ為にも、再現コードを出すのが重要だと思います。
https://ja.stackoverflow.com/help/minimal-reproducible-example

[think49]

@takahashi-one さん
質問を修正した上で、なぜこれがベストアンサーなのでしょう。
納得できません。

Answer 3

他にいい方法はないでしょうか

resize イベント中にループのような JasvaScript関数の大掛かりな処理をせず、resize が終了してイベントを発火する方法が考えられます。

HTMLページの script タグに以下のコードを記述して、実際にウィンドウサイズを変更してみてください。

window.addEventListener("resize", function(ev) {
  console.log(ev.type)
}, false);

開発者コンソールには resize の文字が表示され、表示行ではカウンタが増加するはずです。
ウィンドウサイズ変更中は 繰り返して発火 する特徴があります。
このような場合、画面上の表示内容を頻繁に変えようとすると遅延が生じることがあります。
（ご質問には具体的なことが示されていませんが、この対策が必要になりそうな状況と感じます）

「resize イベント終了時点を捕えて、イベント発火したい」というのは古くからテーマにされていました。
google検索 ：resize 終了 実行

何かの処理は、canvasに描画するアニメーションです。

例えば車のタイヤを永遠と回すとかです。

while(1) で実装せず、resuestAnimationFrame()　を用いて stop / resume できるループを実装してください
（普通はこの方法でアニメーションを制御します）。

google検索：ゲームループ resuestAnimationFrame

Comments

[takahashi-one]

参考にします。ただ今回はwhile(true)で、resize時の挙動を制御するのが目的です。
自分のコードよりその動作を簡単に実現できる方法を教えてもらいました。
質問に追加掲載したので、よかったら批評してください。

Answer 4

while(true)とか仕様上あまりおすすめできないですね
delayも唐突にでてきますが宣言されていますか？

Comments

[takahashi-one]

質問に追加しました