javascript - 使用 keydown() 仅发送一个 Ajax post 请求 - jQuery

Question

这是我的情况:

• 我在“.editable”类中有一堆 DOM 元素，它们附加了 contentEditable 属性。

• 对于每个元素，我使用 keydown() 实例化一个 Ajax POST，但在发送 ajax 请求之前，我检查 keydown() 是否给我 TAB 或 ENTER键，如果是，则 ajax POST 成功。

我现在遇到的问题是，如果按住 TAB 键或 ENTER 键，我最终会发送多个 Ajax POST。我将如何阻止它？

注意:我不想使用 .off() 分离事件，因为我希望这些事件在 ajax POST 完成后仍然存在。

如有任何帮助或建议，我们将不胜感激!

(function($, window, document) {

  /* Namespace */
  $.fn.SaveEditable = function() {  
        var settings = {
            context: null,
            position: null,
            content: "(empty)",
            element: "(empty)",
            data_id: "(empty)"
        };

        var s, keyCode;

        function init(e, options) {         
          s = $.extend({}, settings, options);
          keyCode = e.keyCode || e.which;           

            //If Enter or Tab key is pressed
            if(keyCode == 9 || keyCode == 13) { 
                e.preventDefault();
                s.context.blur();
                sendAjax();
            }
        } //End init

        function sendAjax() {
           $.ajax({
              url: 'save.php',
              type: 'POST',
              data: { user_id: <?=$user_id;?>, sort_id: <?=$currentSort;?>, element: s.element, data_id: s.data_id, content: s.content },

              success: function (data) {
                if(data) {
                    var obj = jQuery.parseJSON(data);
                    //Do something with obj
                }
                $(".ajax-status")
                .addClass("success")
                .html("Updated content successfully");
              },

              error: function() {
                $(".ajax-status")
                .addClass("error")
                .html("An error has occurred. Please try again.");
              }
          });        
         } //End sendAjax


        /* Initilize */
        return this.each(function(i, domEl) {               
            $(this).on({
                keydown: function(e) {
                    init(e, {
                        context: $(this),
                        position: i,
                        content: $(this).text(),
                        element: $(this).data('element'),
                        data_id: $(this).data('id')
                    });
                 }
            });
        });
  };
})(jQuery, window, document);

然后这样调用:

$('.editable').SaveEditable();

Answer 1

这是一个阻止 XHR 请求的例子，如果它仍然挂起的话

$(function(){
    var xhr;
    $("#my-input").keydown(function(){    
         if (!xhr || xhr.readyState === 4) {
            xhr = $.ajax({...});
         }
    });

});