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

Question

我有一个使用 tinyMCE 的应用程序。在此页面中，用户将撰写一条消息，然后在另一个页面上预览它（不使用 tinyMCE 的预览）。我目前有一个 AJAX 功能，可以在用户点击远离 tinyMCE UI 时保存内容。问题是，我在同一个页面上有不同种类的 link，有时当用户点击 link 时，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>

Answer 1

您可以创建某种标志变量，它会告诉您是否应该阻止链接重定向。在发送 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();
  }
});

Answer 2

有几点，您的 save_message() 函数是一个 AJAX 调用，需要完成并发回响应才能正常工作。当您单击锚标记时，将调用该函数（根据上面的代码），但页面会在函数 returns 响应之前重定向。此外，您似乎正在为每个锚标记冗余地调用该函数，为什么不为所有锚标记调用一次，就像这样 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
                         }
        });
});

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

How to prevent all links from redirecting before completing an AJAX process

javascript

ajax

tinymce