0

编辑：响应有关在锚元素上以编程方式执行单击事件或使用 window.open 的评论-由于弹出窗口阻止程序，我无法使用这些。我必须允许用户在锚点上的原始 mouseclick 事件完成其过程 - 导致一个畅通的新窗口。

似乎这里最好的折衷方案是执行一个同步 ajax 请求，并在请求完成之前向用户呈现一个微调器 gif。

编辑：小提琴http://jsfiddle.net/cXdJg/35/

考虑带有指向播放器页面的链接的网络编辑器的情况。

单击设置为播放器的 href 链接时，编辑器会检查内容是否已保存到服务器：

如果是：什么都不做。

如果不是：执行 ajax 请求以保存内容。在 ajax 调用结束时：允许锚元素上的点击事件继续；导致在新的浏览器窗口中执行对播放器页面的请求。

如何在不冻结浏览器的情况下延迟拦截锚元素上的单击事件的函数的结束，直到 ajax 调用结束？见http://www.devcheater.com/#Conclusion

我检查了http://ajaxpatterns.org/Submission_Throttling，但看不到如何在此处应用该示例。

代码形式的想法示例：

$('a.play').click(function){
    if(!isSaved){
          save();  //saves the content and **sets isSaved to true**
    }
     while (!isSaved){
          //burn time until isSaved,  but don't freeze the browser!
     }
     //allow the event handler to end, after which the click on anchor element will
     //  load the player page in new window.
}
4

6 回答 6

2

我认为您发布的链接（http://www.devcheater.com/#Conclusion）指向您最大的问题：您特别想做的事情似乎不可能。但是，您可以尝试这样的事情（从 JSFiddle 重用的代码）：

这种方法不允许click处理程序返回true，其想法是您将从success函数中打开链接。这使用window.open，因此在用户允许之前可能会阻止弹出窗口。

$('.wait').click(function(event){
    var $element = $(this);

    $.ajax({
        type: "POST",
        url: 'some_url',
        data: '',
        cache: false,
        success: function() {
            $('.result').html("ajax call complete on "+ new Date().toTimeString());

            var href = $element.attr('href');

            if (typeof href != "undefined") {
                window.open(href);
            }                    
        }
    });

    event.preventDefault();
    return false;
});
于 2013-01-10T04:59:02.883 回答
1

为单击和加载添加事件侦听器，并在您的代码中创建关联的事件处理程序。

// handles click
var handleClick = function(event){
var $element = $(this);

$.ajax({
    type: "POST",
    url: 'some_url',
    data: '',
    cache: false,
    async: false,
    success: function() {
        $('.result').trigger('loaded', $element.attr('href'));
    }
});

// Handles loaded state
var handleLoad = function(href){
    $(this).html('ajax call complete on '+ new Date().toTimeString());
    // your window is already loaded.
};

// create the event listeners
$(document).on('click', '.wait', handleClick);
$(document).on('loaded', '.result' handleLoad);
于 2013-01-15T20:21:14.927 回答
1

如我所见，您有几个选择：

  • 您可以查看 jQuery queue 方法，该方法允许您将功能块的执行排队以使它们同步。
  • 另一种方法可能是jQuery.trigger()在 ajax 完成处理程序中使用触发单击事件。如果某些事件处理程序执行两次并不重要，这将是最简单的解决方案。
  • 最后，您可以使用 ，从事件中提取所有事件$('[href tag event trigger]').data('events')处理程序，在当前上下文中删除函数的事件处理程序，然后在保存的 ajax 完整处理程序中调用其余部分。

http://api.jquery.com/queue/

http://api.jquery.com/trigger/

http://api.jquery.com/data/

于 2013-01-14T13:28:22.240 回答
1

看看jQuery.ajax异步选项。

$.ajax({
  url: '.....',
  async: false      //Here
});
于 2013-01-14T12:49:14.573 回答
1

解决方案#1

您是否可以控制“播放器”代码？与其在打开播放器之前等待数据保存好，不如让播放器等待数据准备好。

你可以这样做：

当您单击链接并且isSaved是错误的时，立即启动 AJAX异步调用以保存数据并让播放器在新窗口中打开。

播放器的链接将（在 URL 上）有一个参数，该参数将告知数据尚未准备好（正在保存）。播放器将开始查询服务器（每隔几秒一次异步 ajax 调用）以获取数据的“最新版本”。

当保存的数据准备好后，它将提供给播放器。

一个重要的细节：当播放器向服务器请求数据时，提供该数据的最新版本是基本的。

为确保这一点，您必须生成一个随机数，该随机数将成为识别数据最新版本的关键。

保存数据时将密钥与 ajax 调用一起传递。将它与将调用播放器的 URL 一起传递。同样，播放器在查询保存的数据时会将密钥传递给服务器。

解释比实施更难！

解决方案#2

当用户进行更改时，禁用链接，开始保存，保存完成后再次启用链接。

单击链接时，isSaved将始终为 true。

--

希望这可以帮助..

于 2013-01-14T12:49:45.790 回答
0 
while( !isSaved )
$.delay(100);
于 2013-01-02T18:21:09.683 回答