JavaScript 延迟导航直到回调/超时

Question

TLDR:你不能，请参阅问题底部的替代解决方案(即我妥协的解决方案)。

我有一个异步函数，可以在单击链接时将数据发送到服务器，当然，由于页面卸载时间，这很可能不会发送。

有什么方法可以延迟点击的效果，直到回调函数运行或发生超时(两者都会生效，超时会限制可能的延迟)。

点击=>等待超时/回调=>继续正常事件。

或者

点击=>开始通话&超时，取消默认功能 回调/超时调用函数继续/重新启动点击过程

我希望一切都有意义，提前致谢。

编辑:服务器调用不需要 100% 完成。

编辑:我想继续单击事件的原始“功能”，而不是替换或编辑 window.location 变量，因为 onclick 不能保证导航，例如中键单击。

编辑:这是代码的基本结构(现场非常复杂):

item.onclick = function(){

var callback = function(){
    // continue as if nothing happened
    // including non-navigational clicks (e.g. middle-click)
};

// Send call with callback
sendCall(callback);

// if no callback not triggered in 250ms then continue anyway
setTimeout(callback, 250);

return false; // or not if there's a way to delay
}

编辑:对于我想要在这里做的事情似乎没有有用的解决方案，因此我发布了我在答案中使用的代码。

Answer 1

您可以阻止点击的默认操作，这样链接实际上不会在点击时触发。然后您发送 ajax 调用，当它完成时，您的代码将更改为新页面本身。

假设您已经有一个用于执行 ajax 调用的链接的点击处理程序:

function myClickHandler(e) {
    e.preventDefault();
    var self = this;
    sendAjax(..., function() {
        // ajax call done here
        // do the page navigation
        window.location = self.href;
    })
}

您可能想要创建一些关于正在处理点击的用户反馈，因为用户可能会在短暂的延迟之后(正在处理您的 ajax 调用时)看到任何事情发生，并且您不希望鼓励用户再次单击，因为看起来什么也没发生。您甚至可能希望在处理 ajax 调用时防止多次点击。

<小时/>

对您的编辑的回复:

Javascript 中没有方法可以在处理异步 ajax 调用时阻止 Javascript 执行最多 250 毫秒，然后继续正常执行。因此，代码中的大纲并不像您所显示的那样直接可行。

Javascript 中通常的设计模式是防止默认操作，设置异步操作(在您的情况下是 ajax 调用和计时器)，然后当异步事件完成或超时时，您可以手动触发默认操作。已经。但是您必须知道如何自己触发默认操作才能做到这一点(这就是我上面的代码建议所显示的)。

我能想到的唯一解决方法是，您可以发送同步 Ajax 调用(通常被认为是不好的做法)，并在 ajax 调用本身上设置超时。这将暂停 Javascript 的执行以及与页面的所有其他交互，直到 ajax 调用完成或超时。您必须非常彻底地测试它，看看它是否可以在许多浏览器中为您提供所需的交互，因为它肯定不是经常使用的标准东西。我个人不会推荐它(同步ajax 是邪恶的，因为它会锁定浏览器)。

在更全面地了解您真正想要解决的问题后，我会寻找设计更好的解决方案。到目前为止，您只描述了您尝试的解决方案，而不是您要解决的实际问题。这被称为 XY problem并极大地限制了我们为您提供帮助的方式。