Функция запуска после x секунд простоя

Question

Я кодирую приложение, в котором есть пользовательский текстовый редактор, и я хочу, чтобы функция автосохранения запускалась только после того, как прошло несколько секунд простоя (без нажатий клавиш).

Моя проблема в том, что количество внутренний HTML для сохранения (внутри contenteditable div) обычно массивный. Как десятки тысяч массивных <span> объектов. И мне также нужно очистить его перед отправкой обратно на сервер, который также сильно загружен процессором и памятью из-за этих многочисленных элементов. Моя идея состоит в том, что, если я только автоматически сохраню, когда на холостом ходу, пользовательский опыт улучшится.

Я с трудом догадываюсь, как именно должен быть мой лог c, чтобы autoSave () срабатывал только после 15 секунд простоя.

Итак, вот моя неудачная попытка: (извините за смесь jQuery и простого JS)

let idleTime = 0;

$(window).ready(function() {
    //Increment the idleTime counter every 15 seconds.
    setInterval(timerIncrement, 15000); 
    //Zero the idle timer on key press
    $(this).keyup(function(e) {
      idleTime = 0;
    });
});

function timerIncrement() {
  idleTime++;
  if (idleTime > 1) {
    autoSave();
  }
}

window.autoSave = function autoSave() {
    const form = $(".form");
    const method = form.attr("method").toLowerCase(); // "get" or "post"
    const action = form.attr("action"); // url to submit to 
    loadTextFull(); // load the text to the form's input
    $[method](action, form.serialize(), function(data) {});
};

loadTextFull = function loadTextFull() {
  let textContent = document.getElementById("content").innerHTML.trim();
  let cleanContent = DOMPurify.sanitize(transcriptContent, {
    ALLOWED_TAGS: ["span", "i", "p", "div", "select", "option"],
    ALLOWED_ATTR: [
      "id",
      "data-start-time",
      "data-paragraph-counter",
      "data-paragraph-speaker",
      "data-speaker",
      "contenteditable",
      "name",
      "onchange",
      "class"
    ]
  });
  document.getElementById("text_result_full").value = cleanContent;
};

Моя форма, на случай, если это имеет значение выглядит так:

<form class="form" id="edit_text_65" action="/text/65" accept-charset="UTF-8" data-remote="true" method="post">
  <input type="hidden" name="_method" value="patch">
  <input type="hidden" value="" name="text[result_full]" id="text_result_full">
  <input type="submit" name="commit" value="Save" style="display:none" data-disable-with="Guardar">
</form>

Буду признателен за любую помощь. Заранее спасибо.