jQuery Изменение таймаута для улавливания щелчков

Question

У меня есть таблица HTML, которую я заполняю информацией из таблицы базы данных. Я сделал ячейки в таблице, редактируемой щелчком pon, и добавил jQuery, чтобы поймать, когда ячейка была отредактирована (через 2,5 секунды после последнего нажатия клавиши), ajax затем отправляет информацию в отдельный файл php для обновления таблицы базы данных с помощью измененное значение. Проблема, которую я обнаружил, заключается в том, что если ячейка нажата, чтобы перейти в другую ячейку, и произойдет изменение до того, как эти 2,5 секунды будут вставлены, первое изменение никогда не будет обновляться в базе данных.

Мой вопрос: Есть ли способ, что я могу изменить мой код ниже, чтобы также захватить, если <td> ячейка щелкнул из и послал Аяксу немедленно, чтобы сделать изменения в таблице базы данных, так что никаких изменений не пропустили ?

 $('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); 
});