jQueryタイムアウトがクリックアウトをキャッチするように変更する

Question

私はHTMLテーブルを持っており、データベーステーブルから情報を入力しています。私は編集可能な表のセルをポンクリックにして、セル編集が完了した時点で（最後のキーを押すと2.5秒後に）jQueryを追加して、別のPHPファイルに情報を送信してデータベーステーブルを更新します変更された値。私が見つけた問題は、セルが別のセルに入るためにクリックされ、2.5秒前に変更が加えられた場合、最初の変更は決してデータベースに更新されないということです。

、私の質問は：は、私は<td>セルが外にクリックして変更が見落とされていないように、データベーステーブルの変更を行うために、すぐにAJAXに送信された場合も、キャプチャするために、以下の私のコードを変更することができます任意の方法はあります？

 $('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

異なる変数を使用して、各セルのタイマーを保持できます。 tdTimersという名前の空のオブジェクトを作成し、それをセルのグローバルインデックスとともに使用して、内部にsetTimeoutから返されたタイマーを格納します。こうすると、ユーザーがセルを離れて別のセルに入ると、前のセルのタイマーが有効になり、オブジェクト内に異なるインデックスがあるため、最終的には起動します。

var tdTimers = {}; 

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

    if(tdTimers[tdGlobalIndex]) clearTimeout(tdTimers[tdGlobalIndex]); 
    tdTimers[tdGlobalIndex] = 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); 
});