1
0
テーマ、知りたいこと
AbortControllerの使い方について正しい使い方が出来ているか確認したいです。
後述のコードで想定したconsole.logの動きは確認できたのですが、
他の方が書いたコードを見ているとcontroller = nullを記述しているパターンをたまに見ます。
controller = nullに意味はあるのでしょうか？
そもそもAbortControllerは正しく使えているのでしょうか？
背景、状況
以下コード
let controller = new AbortController();
function resetController() {
controller.abort();
// ここにnullを配置してる記述をたまに見る
// controller = null
controller = new AbortController();
}
document.getElementById("a").addEventListener("click", () => {
console.log(1);
resetController()
document.getElementById("b").addEventListener("click", () => {
console.log(2);
},{ signal: controller.signal });
});
回答3件
#1
総合スコア37736
投稿2024/07/13 05:57
メモリリークを防ぐためにやっているだと思いますが、このコードの場合はcontroller変数を上書きしているので参照が切れるため、あまり意味がなさそうに思いました。
#2
総合スコア118405
投稿2024/07/17 04:14
aのクリックがトリガーでbのクリックを有効にするという流れですがわざわざAbortControllerで制御するのも微妙ですね。fetchでpromise.raceで制御を止めたいとかであれば別ですが有効なAbortControllerの使い方ではないかもしれません。
命題とはずれますが同じ動作ならaのdatasetなどで分岐するとかの方が制御しやすいかもしれません。
html
1<script> 2document.addEventListener("click", ({target}) => { 3 if(target.matches('#a')){ 4 target.dataset.signal=1; 5 console.log(1); 6 } 7 if(target.matches('#b') && a.matches('[data-signal]')){ 8 console.log(2); 9 } 10}); 11</script> 12<div id="a">a</div> 13<div id="b">b</div>
#3
退会済みユーザー
総合スコア0
投稿2024/07/17 05:57
編集2024/07/17 06:44他の方が書いたコードを見ているとcontroller = nullを記述しているパターンをたまに見ます。
controller = nullに意味はあるのでしょうか？
第三者に説明するのに、コードの参照もなければ何も伝わりません。こんなコードなだけでは？
JavaScript
1let controller = null; 2function abortIfExecuting() { 3 if (controller) { 4 const aborting_controller = controller; 5 controller = null; 6 aborting_controller.abort(); 7 } 8} 9function execute() { 10 controller = new AbortController(); 11 ... 12}
そもそもAbortControllerは正しく使えているのでしょうか？
ご自身のコードもマークダウンすらできていない状況＝質問すら正しくできていない状況で、中途半端なコードを出されてもOKなコードには程遠いです。もっと学習して理解度を上げましょう。
https://developer.mozilla.org/ja/docs/Web/API/AbortController
一応node.jsで動くサンプルコード(express使用)を書いてみました。
JavaScript
1import express from 'express'; 2const app = express(); 3app.get('/', (req, res) => { 4 res.send(` 5<p>---</p> 6<p>---</p> 7<p>---</p> 8<button id="stop">stop</button> 9<button id="reset">reset</button> 10<script> 11document.addEventListener('DOMContentLoaded', async()=>{ 12 let controller = null; 13 const stop_button = document.querySelector('#stop'); 14 const reset_button = document.querySelector('#reset'); 15 const elems = document.querySelectorAll('p'); 16 const call_api = async(e) => { 17 if (! controller) { 18 controller = new AbortController(); 19 } 20 try { 21 e.textContent = 'waiting...'; 22 const response = await fetch('/api', {signal: controller.signal}); 23 const json = await response.json(); 24 e.textContent = json[0]; 25 } 26 catch(ex) { 27 if (ex instanceof DOMException) { 28 e.textContent = 'stopped'; 29 console.log(ex); 30 } else { 31 throw ex; 32 } 33 } 34 }; 35 const abort = () => { 36 if (controller) { 37 const aborting_controller = controller; 38 controller = null; 39 aborting_controller.abort(); 40 } 41 }; 42 const start = () => { 43 call_api(elems[0]); 44 call_api(elems[2]); 45 }; 46 stop_button.addEventListener('click', ()=>{ 47 abort(); 48 }); 49 reset_button.addEventListener('click', ()=>{ 50 abort(); 51 elems.forEach(e=>{e.textContent = '---';}); 52 start(); 53 }); 54 start(); 55}); 56</script> 57`); 58}); 59app.get('/api', async (req, res) => { 60 await new Promise(resolve=>{setTimeout(resolve, 20000)}); 61 res.send(['Hello World!']); 62}); 63app.listen(3000, ()=>{});