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

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
}

编辑:似乎没有有用的解决方案,我想在这里做什么,所以我发布了我在答案中使用的代码。


您可以阻止点击的默认操作,这样链接实际上不会在点击中触发。 然后你发送你的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调用完成或超时。 你必须非常彻底地测试它,看看它是否能够让你在很多浏览器中进行所需的交互,因为它当然不是经常使用的标准东西。 我个人不会推荐它(同步阿贾克斯只是邪恶的,因为它锁定了浏览器)。

更全面地了解你真正想要解决什么问题,我会寻找一个更好的设计解决方案。 到目前为止,您只描述了您尝试的解决方案,而不是您尝试解决的实际问题。 这被称为XY问题,并极大地限制了我们可以帮助您的方式。


如果你想在成功的ajax之后做一些事情,那么作为之前提到的用户,你可以使用ajax成功函数来触发所需的行为以及'mousedown'/'touchstart'来保存一些ms而不是'click'。

jQuery('body').on('click','yourlink',function(e){
    e.preventDefaul;
    $.ajax({
        url: 'url here',
        type: 'POST',
        success: function() {
        //go to desired url
            window.location.replace = 'the url to navigate to';
        },
        error : function(){
         //ajax error handling code here
        }
     });
});

“我无法使用window.location技巧”并不完全理解你的意思,但希望这有助于。

干杯


这是我最终使用的代码,它检查点击是左键点击还是点击:

element.onclick = function(event){
    if(event.button == 0){
        var callback = function(){
            window.location = destinationUrl;
        };
        sendCall(callback);
        setTimeout(callback, 250);
        return false; // halt normal click propagation
    } else {
        sendCall();
    }
};
链接地址: http://www.djcxy.com/p/83717.html

上一篇: JavaScript delay navigation until callback/timeout

下一篇: What is event bubbling and capturing?