Question

我有一个显示照片画廊的网页。用户选择了要下载的照片后，然后单击下载按钮下载照片。 javascript代码遍历选定的照片，并为每个照片模拟一个“单击”事件。不幸的是，javascript一次只能触发和处理一个“ click”事件。结果是仅下载了最后一张照片，因为随后的每个模拟“单击”事件都会破坏前一张照片。我需要一种方法来暂停脚本的执行，并在继续下一个循环迭代之前检查文件何时完成下载。我在下面的代码中使用了 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);
    }

anchor标签如下：

<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>

Answer 1

我找到了一种完全符合我想要的解决方案，因此，不用担心对此进行调查，谢谢。解决方案是将Download（）函数更改为异步运行，然后使用Promise来等待click事件的调度响应。

javascript下载结束触发

1 个答案: