jQuery, verwenden Sie mehr als einen Ereignisauslöser?

Question

Ich habe eine HTML-Tabelle, die ich mit Informationen aus einer Datenbanktabelle auffüllen. Ich habe die Zellen in der Tabelle nach dem Klick editierbar gemacht und jQuery hinzugefügt, um nach Beendigung der Bearbeitung der Zelle zu fangen (2,5 sec nach dem letzten Tastendruck), dann sendet ajax info an eine separate php-Datei, um die Datenbanktabelle mit den geänderten zu aktualisieren Wert. Ein Problem, das ich gefunden habe, ist, dass, wenn die Zelle angeklickt wird, um in eine andere Zelle zu gehen, und eine Änderung vor diesen 2,5 Sekunden vorgenommen wird, die erste Änderung niemals in die Datenbank aktualisiert wird.

Meine Frage ist: Wenn ich auf ein Feld Unschärfe Ereignis statt ändern würde, ist es eine Möglichkeit, dass ich immer noch den Timer übernehmen könnte, so dass Ajax erreicht, wenn entweder das Feld Unschärfe oder das Timeout erreicht werden?

$('td').on('input', function() { 
    var _this = $(this); // preserve reference to the input field here 

    if(saveTimeout) clearTimeout(saveTimeout); 
    saveTimeout = setTimeout(function() { 
     console.log(_this) 
     $.ajax({ 
      method: "POST", 
      url: "updatedatabase.php", 
      data: { 
       content: _this.text(), 
       date: _this.siblings().first().text(), 
       prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(), 
       old: old 
      } 
     }) 
     .done(function(msg) { 
      alert(msg); 
     }); 

    }, 2500); 
}); 

Answer 1

Ich schlage vor, Sie verwenden eine andere für .setTimeout Verzögerung je nachdem, welches Ereignis auslöst.

So auf blur, wird es nicht 2,5 Sekunden warten, um zu speichern, wie auf input.

EDITED
"double speichern" Um zu verhindern, die td als gespeichert markieren.

var saveTimeout; 

// Remove the "saved" class on keydown 
$('td').on('keydown', function(e) { 
    $(this).removeClass("saved"); 
}); 

$('td').on('input blur', function(e) { 
    console.log("event "+e.type+" occured"); 
    var timeoutDelay=2500; 

    if(e.type == "blur"){ 
     timeoutDelay=1; 
    } 

    // If NOT already saved... 
    if(!$(this).hasClass("saved")){ 
     var _this = $(this); // preserve reference to the input field here 

     clearTimeout(saveTimeout); 
     saveTimeout = setTimeout(function() { 
      console.log(_this); 

      $.ajax({ 
       method: "POST", 
       url: "updatedatabase.php", 
       data: { 
        content: _this.text(), 
        date: _this.siblings().first().text(), 
        prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(), 
        old: old 
       } 
      }) 
      .done(function(msg) { 
       alert(msg); 
       // Add the "saved" class to prevent other saving 
       _this.addClass("saved"); 
      }); 

      console.log("Ajax sent"); 

     }, timeoutDelay); 
    } 
});