Javascript 如何在完成AJAX过程之前防止所有链接重定向

我有一个使用tinyMCE的应用程序。在此页面中，用户将编写一条消息，然后在另一个页面上预览它（不使用tinyMCE的预览）。我目前有一个AJAX功能，当用户从tinyMCE UI点击时，它会保存内容。问题是，我在同一个页面上有不同类型的链接，有时当用户单击链接时，AJAX函数无法在重定向之前保存内容，从而导致预览空白或消息未保存

<div>
<textarea id='msg'></textarea>
<a id='preview'>Preview</a>
<a id='other_page'>Other Page</a>
<a id='another_page'>Another Page</a>
</div>

预览
其他页面
另一页

下面是JavaScript处理程序和函数

    <script>
    // INITIALIZE TINYMCE
    tinyMCE.init({
    // SAVE CONTENT ON BLUR
            editor.on('blur', function() { save_message(this); });
    })

    function save_message(){
        var msg= tinyMCE.get('msg ').getContent();
         $.ajax({
                    statusCode : { 404: function(){alert('Not Found');} },
                    type       : 'post',
                    data       : {msg:msg},
                    url        : '<script_that_handles_save>',
                    success    : function(res){ // DO SOMETHING } 
            }); 
    }

// WHEN PREVIEW IS CLICKED
$('a.preview).click(function(){
          save_message();
});

$('a.other_page).click(function(){
          save_message();
});

$('a.another_page).click(function(){
          save_message();
});
</script>

//初始化TINYMCE
tinyMCE.init({
//在BLUR上保存内容
on（'blur'，function（）{save_message（this）；}）；
})
函数save_message（）{
var msg=tinyMCE.get（'msg'）.getContent（）；
$.ajax({
状态代码：{404:function（）{alert（'notfound'）；}，
键入：“post”，
数据：{msg:msg}，
url:“”，
成功：函数（res）{//DO SOMETHING}
}); 
}
//单击预览时
$（'a.preview）。单击（函数（）{
保存消息（）；
});
$（'a.other_页）。单击（函数（）{
保存消息（）；
});
$（'a.另一页）。单击（函数（）{
保存消息（）；
});

您可以创建某种标志变量，它将告诉您是否应该阻止链接重定向。在发送保存消息的AJAX请求之前，将此变量设置为

true

，请求成功后将其设置回

false

。还要在所有链接上设置一个事件侦听器，它将检查此标志变量，如果它等于

true

，则阻止重定向

示例代码：

var linksDisabled = false;

function save_message() {
  linksDisabled = true;
  $.ajax({
    success: function() {
      linksDisabled = false;
    }
    // some other options
  })
}

$("a").click(function(event) {
  if (linksDisabled) {
    event.preventDefault();
  }
});

---

有几件事，您的

save_message（）

函数是一个AJAX调用，需要完成并发送回响应才能正常工作。当您单击锚定标记时，会调用函数（根据上面的代码），但在函数返回响应之前页面会重定向。 另外，似乎您正在为每个锚定标记冗余地调用函数，为什么不为所有锚定标记调用一次函数，例如

a.click（function（）{//your function here}）

您的代码逻辑很好，只需重新构造并简化它，如下所示：

tinyMCE.init({
// SAVE CONTENT ON BLUR
        editor.on('blur', function() { save_message(this); });
})
$('a').click(function(e){
        // prevent the redirect
        e.preventDefault();
       var msg= tinyMCE.get('msg ').getContent();
       var location = $(this).attr('href');  
      // execute ajax
     $.ajax({
                statusCode : { 404: function(){alert('Not Found');} },
                type       : 'post',
                data       : {msg:msg},
                url        : '<script_that_handles_save>',
                success    : function(res){
                               // redirect on success
                              window.location.href = location
                         }
        });
});

tinyMCE.init({
//在BLUR上保存内容
on（'blur'，function（）{save_message（this）；}）；
})
$（'a'）。单击（函数（e）{
//防止重定向
e、 预防默认值（）；
var msg=tinyMCE.get（'msg'）.getContent（）；
变量位置=$（this.attr（'href'）；
//执行ajax
$.ajax({
状态代码：{404:function（）{alert（'notfound'）；}，
键入：“post”，
数据：{msg:msg}，
url:“”，
成功：功能（res）{
//成功时重定向
window.location.href=位置
}
});
});
对不起，我对这些措辞有点困惑。您是否尝试过在$.ajax函数的成功处理程序中使用JS重定向，而不是依赖默认的锚定链接功能？linksDisabled变量如何连接到我的锚定标记？