二重送信防止をするにあたってCookieを監視しダウンロードの検知をしたいがたまに失敗する（jQuery）

Question

前提・実現したいこと

二重送信防止を実現したいと思っています。
二重送信防止を実装したいボタンは学生の証明書を出力するというボタンです。disabledでボタン無効化→ダウンロード完了後にボタン有効化をすることにより二重送信防止をしたいのですが、ダウンロード完了を検知する方法としてCookieを監視するやり方で実装を試みています。
jQueryのCookie.jsというプラグインを使っています。
cookieの設定部分はphpです。
失敗する原因がどこにあるのか思いつかないので、まずは原因を特定したいです(ToT)

発生している問題・エラーメッセージ

１０回に１回ほど、ダウンロードが完了してもボタン有効化になりません。
その場合、何故か他の出力ボタンをクリックすると有効化されます。

エラーメッセージ
表示されていません・・・

該当のソースコード

クライアント側
function cookie_inspection(id){
$('#' + id).prop("disabled", true);
var sti = setInterval(function () {
if ($.cookie("downloaded")) {
$('#' + id).prop("disabled", false);
clearInterval(sti);
}
}, 1000);
$.removeCookie("downloaded", { path: "/" });
}
サーバ側
setcookie('downloaded','complete',0,'/');

試したこと

学生の数（テーブルの行数）分のボタンをループで生成しているので、ボタンのHTML部分には任意の文字列＋行数情報という感じでIDを振っていて、
最初1行目以外はボタン有効化されないという状態だったので、
行数の情報が取れていないのかと思いalertで値をチェックしたところ案の定数字が順番になってなかったので、clearIntervalを入れたら順番で表示されるようになりました。
ですがボタン有効化は上手くいかないので、何が原因なのか今は見当もつきません。(>_<)
ボタン完了後にalertを入れてみるとどのボタンを押しても正常に値が取得できるので、
ダウンロードの検知に失敗しているわけではないのか、何が原因で１０回に１回ほどボタン有効化に失敗しているのかわからないのでどなたかなにかアドバイスをいただけるとうれしいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

ダウンロード待ちということであればBlobに一度うけて処理すればいいのでは？

Comments

[yambejp]

//myfile.html
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#btn').addEventListener('click',async e=>{
e.target.disabled=true;
const url="hoge.php?time="+new Date().getTime();
const content=await fetch(url).then(res=>res.blob());
const link=Object.assign(document.createElement('a'),{
'href':window.URL.createObjectURL(content),
'download':'test.txt',
});
link.click();
e.target.disabled=false;
});
});
</script>
<input type="button" value="download" id="btn">

//hoge.php
<?PHP
sleep(3);
print "test";

[coco12]

できました！！ありがとうございますm(_ _)m