javascript - setTimeout 中的 Jquery 单击处理程序

Question

我有<a>单击的元素运行处理程序，例如:

function onCummReportClick(e) {
    if ($(e.currentTarget).attr('href').indexOf('csv') !== -1) {
    {
        return true;
    }

       //Here some files loaded asynchronousely
    $.ajax().success(...).always(...);

    var reports = [];
    var downloadedCount = 0;
    var reportsCount = 9;

    var oneDownloaded = function() {
        if (downloadedCount === reportsCount) {
            //Prepare cummulative reports CSV
            $(e.currentTarget).attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(reports.join('\n\n')))

            //HERE!
            $(e.currentTarget).trigger('click');
        } else {
            setTimeout(oneDownloaded, 1000);
        }
    };

    setTimeout(oneDownloaded, 1000);
}

即它下载报告，将其内容加入到一个 CSV 中，并将其设置为原始 <a> 的 Base64 编码。的href。之后我希望它自动下载，而无需用户再次单击。

和return true不会生成“正常”点击流，看起来就像刚刚跳过一样。我的意思是我第二次遇到这个处理程序，但下载没有开始。

如果我设置href静态生成值并在处理程序中仅返回 true如果按预期工作 - 文件自动下载。

我知道我可以同步下载报告并使整个方法同步，但我不喜欢这种方法。

UPD:我创建了 jsfiddle，它演示了我想要做的事情:https://jsfiddle.net/u1rs17w1/

Answer 1

我不知道为什么 JSFiddle 的代码不起作用，因为我理解所有关于“丢失上下文”的假设都是错误的(至少有一半错误)，因为原始超链接已正确更新(我的意思是 href属性已更新)。

但我找到了另一个解决方案。我没有点击原始链接，而是执行以下操作:

var link = document.createElement('a');
link.download = _messages.CUMMULATIVE_REPORT_NAME;
link.href='data:application/csv;charset=utf-8,'+ encodeURI(csvFile.join('\n\n'));

//These 2 lines are required for Firefox
link.style = "display: none";
document.body.appendChild(link);

link.click();

甚至可以在 setTimeout 处理程序中使用。我怀疑 jquery 风格的点击，即 return true (我无法以某种方式清楚地调用它)只能在主线程中工作。每次我使用 setTimeout 时，都会在新线程中继续执行。但是在新线程中创建元素并单击它就像一个魅力!

祝你编码愉快!

UPD:此解决方案在 Firefox 中不起作用。除非同步 AJAX(fffffffuuuuuuu!)并且返回 true，否则 Firefox 中的任何操作都不起作用。

UPD1:添加了针对 Firefox 的解决方案。