非同期処理をabortしてやり直す

非同期処理をabortしてやり直す2022/1/18 14:51:09

初めてAbortControllerを使ってみた。
なかなか不思議なコードになった。

下記のコードをChromeのコンソールに貼り付けると実験できる。
Webページのどこかをクリックするとカウントが始まり、
再びクリックするとカウントが０にリセットされる。

jsCopied!
 let abortController;
 let promise;
 
 const count = () => {
   abortController?.abort();
   abortController = new AbortController();
   
   return promise = (async({ signal }) => {
     try {
       await promise;
     } catch(exception) {
       if (exception.name !== 'AbortError') {
         throw exception;
       }
     } finally {
       for (const index of [...Array(10).keys()]) {
         if (signal.aborted) {
           throw new DOMException('Aborted', 'AbortError');
         }
         
         console.log(index);
         await new Promise(resolve => setTimeout(resolve, 1000));
       }
     }
   })({ signal: abortController.signal });
 };
 
 document.body.addEventListener("click", count);
非同期処理をabortしてやり直す

関連ページ
