javascript - 空闲 x 秒后触发功能

Question

我正在编写一个具有自定义文本编辑器的应用程序，并且我希望仅在几秒钟的空闲时间（无按键）过去后触发自动保存功能。

我的问题是要保存的 innerHTML 的数量（在 contenteditable div 内）通常很大。就像成千上万的<span>物体一样巨大。而且我还需要在将其发送回服务器之前对其进行清理，这也是 CPU 和内存中的大量元素。我的想法是，如果我只在空闲时自动保存，用户体验将会得到改善。

我很难猜测我的逻辑到底应该如何，因此 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>

我会很感激任何帮助。提前致谢。

标签： javascriptjquery