- 締切済み
他の関数内にあるsetinertvalを参照できな
clearInterval(timer0);が他の関数内にあるsetinertvalを参照できない。 エラーになってしまいます。 let startSlot = (()=> { let timer0 = setInterval(() => { 内容 }, interval); })(); // stopSlot let stopSlot = (()=> { const stop0 = document.getElementById('stop0'); const stop1 = document.getElementById('stop1'); stop0.addEventListener('click', ()=> { clearInterval(timer0); }); })(); 勝手にカプセル化してしまう スコープの問題に非常に悩むのですがどう対処しますか？ よい回答を頂けないので、いろいろな所で聞いています。
- htmlcss123
- お礼率66% (194/293)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
ついで。 師匠の名言集から１つ 「変更に強く、丈夫な（他者からの影響を受けない）プログラムを心がけなさい。」
- babu_baboo
- ベストアンサー率51% (268/525)
＃３です >クラスなら、すべての変数がグローバルになる いろいろと勘違いがあるようですが、説明が面倒なので割愛。 -- >スコープの問題に非常に悩む 一つの関数の中に詰め込めば、結果としてその中では変数を参照出きるのだから 実現したいのならそうすれば好い。 結果として１つのスコープの中で扱う変数は多くなる。さらにプログラムも長くなる。 それぞれの変数の関係を考慮するので、コーディングに時間を要する。 現にあなたはそうするだけで良いのに、それを悩んで質問をしている。 >関数とクラスの違いはこれだけ オブジェクト指向っぽい考え方は、可能な限り機能を細分化しておき、それらを継承もしくは組み合わせて複雑なものを構成していく。 細分化されるとプログラムは短くなる。早く作れる。 回答者側にクラスを継承してプログラムを書ける人は沢山いても、それほど複雑な質問はないしあったとしても面倒なので答えない。（質問者がアレな場合が多いし…想像だけどね） ましてやその便利さを伝えきれないし、理解しなくても用が済んでしまうプログラマが多いのでは？ 小さくはない（巨大な）プログラムでも書いてみれば？（書いたことはないけれど） その有り難味がわかるのでは？ -- >グローバル変数として定義するしかありません この言葉に意地になってしまった。（時間返せ～！と心の中で叫ぶ） -- あと訂正 this.timerId = clearInterval (this.timerId), null; を this.timerId = (clearInterval (this.timerId), null); に、 doc.addEventListener ('click', this); を doc.addEventListener ('click', this, false); に。
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE html> <meta charset="utf-8"> <title>Slot</title> <style> table th { font-size: xx-large } </style> <body> <table border="1"> <tr> <th> <th> <th> <tr> <td> <input type="button" value="Start"> <td> <input type="button" value="Start"> <td> <input type="button" value="Start"> <tr> <td> <input type="button" value="Stop"> <td> <input type="button" value="Stop"> <td> <input type="button" value="Stop"> </table> <script> { const randomInt = function (n = 10) { return Math.floor (Math.random () * n); }, disp = function () { let no = randomInt (); this.no = no; this.view.textContent = no; }, init = function () { let doc = this.start.ownerDocument; doc.addEventListener ('click', this); disp.call (this); }; class Slot { constructor (view_emt, start_btn, stop_btn) { this.view = view_emt; this.start = start_btn; this.stop = stop_btn; this.timerId = null; this.no = null; init.call (this); } startSlot () { if (! this.timerId) this.timerId = setInterval (disp.bind (this), 100); } stopSlot () { if (this.timerId) this.timerId = clearInterval (this.timerId), null; } handleEvent ({target}) { switch (true) { case this.start === target : this.startSlot (); break; case this.stop === target : this.stopSlot (); break; } } } this.Slot = Slot; } //_________ let doc = document, view = doc.querySelectorAll ('tr:first-of-type th'), start = doc.querySelectorAll ('tr:nth-of-type(2) input'), stop = doc.querySelectorAll ('tr:nth-of-type(3) input'), cell = view.length, ctrls = []; for (let i = 0; i < cell; i += 1) ctrls.push (new Slot (view[i], start[i], stop[i])); </script>
お礼
やはりクラスなら、すべての変数がグローバルになるのでアクセスがどこからでもできるのですね。 関数とクラスの違いはこれだけでしょうか？ つまりこれ以外は関数と同じように使えば問題ないでしょうか？
- t_ohta
- ベストアンサー率38% (5238/13705)
＞ そうするとstartSlotという関数の呼び出しによる実行ができないですよね。 できますよ
- t_ohta
- ベストアンサー率38% (5238/13705)
timer0 をグローバル変数として定義するしかありません
お礼
そうするとstartSlotという関数の呼び出しによる実行ができないですよね。 このような場合は再利用を飽きらめて、同じソースを何度も使うしかないのでしょうあk？
お礼
あれな回答者ww