Javascript 延迟单击事件直到AJAX完成

我编写了一个AJAX脚本，用于保存表单数据，然后显示此数据的预览页面一键式事件。以下是脚本：

$('#ajax-preview').click(function(e) {

    var formData =  $('#advertiser-edit-form').serializeArray();

    $.ajax({
       type: 'post' ,
       url: "ajax-preview.php",
       data: formData,
       success: function(data, status, jqXHR) {
            previewURL = data;
            $('#ajax-preview').attr('href', previewURL);       
       }           
    });        
});

问题是，有时PHP脚本在用户进入预览页面之前无法完成其保存例程。在这种情况下，用户在进入预览页面时会看到未更新的数据。然后他必须重新加载页面才能看到更改

---

我如何设计脚本，使用户只有在AJAX更新数据后才能进入

previewURL

。

问题在于，

单击
处理程序中的代码只启动AJAX调用，它不会等待调用完成，因此单击的默认行为（在链接之后）立即发生，当ajax调用仍在运行时。除非要使ajax调用同步，否则不能使单击事件等待，这会导致糟糕的UX

相反，我建议用户按下一个按钮来生成预览，这将进行ajax调用，然后让ajax结果显示（取消隐藏）一个用户可以单击以查看预览的链接

粗略的例子：


$（“#btn创建预览”）。单击（函数（）{
var待定=$（“#预览待定”），
msg=$（“#预览消息”），
btn=这个；
btn.disabled=true；
msg.hide（）；
待定。fadeIn（“fast”）；
//通过setTimeout模拟ajax
setTimeout（函数（）{
//这是ajax完成函数
pending.hide（）；
msg.find（“a”）.attr(
“href”，
"http://example.com?x=“+Math.floor（Math.random（）*10000）
);
味精fadeIn（“快速”）；
btn.disabled=false；
}, 1000);
});

正在生成预览。。。
你的预览已经准备好了；
来看看吧。
您认为这行代码是什么？
$（'#ajax preview'）.attr（'href'，previewURL）是什么？重定向到
previewURL
页面？@hindmast:这不是很明显，但他正在更新所单击链接上的
href
，希望在单击默认操作发生时使用更新的
href
。@hindmast T.J.Crowder是正确的。脚本本身没有重定向。只有链接的URL是动态创建的。单击事件应该是将用户发送到此URL。@luqo33问题在于AJAX请求是异步的。所以，在点击事件应用链接之前，您不能更改链接的URL。如果您想在AJAX请求完成后将用户转发到其他页面，则必须使用
window.location
方法/属性，例如
location.replace（）
这绝对是正确的答案，也是解决问题的合理方法。我真的很感谢你的努力。