javascript下载结束触发器答案

【问题标题】：javascript download ended triggerjavascript下载结束触发器
【发布时间】：2019-10-17 09:01:17
【问题描述】：

我有一个显示照片库的网页。用户选择好要下载的照片后，点击下载按钮即可下载照片。 javascript 代码遍历选定的照片并为每张照片模拟一个“点击”事件。不幸的是，javascript 只允许在任何时候触发和处理一个“点击”事件。结果是只下载最后一张照片，因为每个后续模拟的“点击”事件都会破坏前一张照片。我需要一种暂停脚本执行的方法，并在继续下一次循环迭代之前检查文件何时完成下载。我在下面的代码中使用了 alert() 函数来模拟这种行为。

    function Download() {
        var thm;
        for( thm of thumbnails ) {
            var download_evt = new MouseEvent("click", {
                view: window,
                bubbles: true,
                cancelable: true,
            });
            var cancelled;
            try {
                if (thm.selected == 1 ) {
                    document.getElementById(thm.photo_id).type = "application/octet-stream";
                    cancelled = !document.getElementById(thm.photo_id).dispatchEvent(download_evt);
                    alert("wait");
                }
            } catch(err) {
                alert(err.message);
            }
        }
    }

下面的 javascript 代码处理用户点击缩略图。它突出显示缩略图并标记要下载的照片并阻止锚标记的默认操作。

    function SelectPhoto(btn_el){
        // if the user clicked the anchor,
        // select the photo but don\'t download it.
        if ( event.isTrusted == false ) {
            return true;
        }
        btn_el.classList.toggle("w3-theme-d1");
        var idx = thumbnails.findIndex(FindPhotoId,btn_el.id);
        thumbnails[idx].selected = 1 - thumbnails[idx].selected;
        event.preventDefault();
    }
    function FindPhotoId(thm) {
        return (thm.photo_id * 1) == (this * 1);
    }

锚标记如下所示：

<a href="/image.jpg' 
   type="application/octet-stream"
   download
   class="w3-border w3-btn photosheet" 
   id="123"
   onclick="SelectPhoto(this);">
   <img src="image.jpg" alt="" style="width:100%;">
</a>

【问题讨论】：

这是解决这个问题的一个非常糟糕的方法。而是尝试跟踪选择了哪些图片，然后在单击下载按钮时下载所选图片。
这正是代码试图做的。
您正在尝试发起点击事件。我的意思是你不应该这样做，而是启动任何 JS 代码运行来处理点击事件。如果你能分享在点击事件上运行的代码，我可以提供完整的答案
这是一个带有 href 的标签。当用户点击缩略图时，它会突出显示它周围的边框。我已经使用 event.preventDefault() 禁用了默认操作。只有当用户单击“下载”按钮时，才能下载照片。
这里是处理锚点标签点击的JS代码。 function SelectPhoto(btn_el){ // 如果用户点击了锚点， // 选择照片但不下载。 if ( event.isTrusted == false ) { return true; } btn_el.classList.toggle("w3-theme-d1"); var idx = thumbnails.findIndex(FindPhotoId,btn_el.id); thumbnails[idx].selected = 1 - thumbnails[idx].selected; event.preventDefault(); }

标签： javascript php html

【解决方案1】：

我找到了一个完全符合我要求的解决方案，所以不要费心研究这个，谢谢。解决方法是把 Download() 函数改为异步运行，然后使用 Promise 等待 click 事件的 dispatch 响应。

【讨论】：