在 keyup/keydown 事件上具有唯一超时的 jquery 多个选择器

Question

我正在尝试创建一个自动保存输入到几个文本框中的输入的功能。我在一个选择器 ($input) 中有 3 个输入，还有一个在 keyup/paste 和 keydown 上更新的计时器 (typingTimer)。如果在 keyup 事件之后计时器在 3 秒 (doneTypingInterval) 后没有被重置，元素将被发送到一个自动保存函数，该函数通过 ajax 发布元素名称和值。

我遇到的问题是，如果我输入一个输入（即：#input-name），一秒钟后我输入另一个（即：#input-shortName），第一个输入（#input-name）是从未发送到自动保存功能。有没有一种好的方法可以在不为每个输入创建唯一的 typingTimer 和 on 事件的情况下做到这一点？我以这种方式尝试过它并且它有效，但我确信必须有更好的方法。

let typingTimer;

  const doneTypingInterval = 3000;

  const $input = $('#input-name, #input-shortName, #input-email');

  $input

    .on('keyup paste', function () {

      if($.fn.isAutoSaveOn()) {

        clearTimeout(typingTimer);

        typingTimer = setTimeout($.fn.autoSaving, doneTypingInterval, this);

      }

    })

    .on('keydown', function () {

      if($.fn.isAutoSaveOn()) {

        clearTimeout(typingTimer);

      }

    })

  ;

$.fn.autoSaving = function(e) {

    const autosave = $('#autosave')

    if(autosave.hasClass('active')) {

      autosave.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>&nbsp;' + lang_saving);

      const element = $(e);

      const url = '/v3/api/orgs/' + orgId + '/update';

      const input = JSON.stringify({

        field: element.attr('name'),

        value: element.val()

      });

      $.ajax({

        type: "POST",

        url: url,

        data: input,

        contentType: "application/json"

      })

      .done(function(response) {

        notify("Success", response, "bottom", "right", "ni ni-bell-55", "success", "animated fadeIn", "animated fadeOut");

      })

      .fail(function(response) {

          notify("Error", response, "bottom", "right", "ni ni-bell-55", "error", "animated fadeIn", "animated fadeOut");

      })

      .always(function() {

        $.fn.autoSaveOn();

      });

    }

  }

Answer 1

您可以为输入提供一个自动保存时间戳，然后检查它是否已经过去，而不是试图让超时彼此重叠。let auto_save_timer = null;&nbsp; &nbsp;&nbsp;$('input.auto-save').on('keyup paste', function() {&nbsp; this.setAttribute('data-auto-save-timeout', (new Date()).getTime() + 3000); //set save time&nbsp; if (!auto_save_timer) {&nbsp; &nbsp; auto_save_timer = setInterval(function() {&nbsp; &nbsp; &nbsp; let $inputs = $('input[data-auto-save-timeout]');&nbsp; &nbsp; &nbsp; if ($inputs.length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$inputs.each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if ((new Date()).getTime() - this.attributes['data-auto-save-timeout'].value >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.removeAttribute('data-auto-save-timeout');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;your_save_function(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;clearInterval(auto_save_timer); //stops the timer&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;auto_save_timer = null; //for checking if the timer is active,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//clearInterval() doesn't make it false&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//this prevents multiple timers from overlapping&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, 1000);&nbsp; }});https://jsfiddle.net/sjmdqhgu/

Answer 2

您可以为输入提供一个自动保存时间戳，然后检查它是否已经过去，而不是试图让超时彼此重叠。let auto_save_timer = null;&nbsp; &nbsp;&nbsp;$('input.auto-save').on('keyup paste', function() {&nbsp; this.setAttribute('data-auto-save-timeout', (new Date()).getTime() + 3000); //set save time&nbsp; if (!auto_save_timer) {&nbsp; &nbsp; auto_save_timer = setInterval(function() {&nbsp; &nbsp; &nbsp; let $inputs = $('input[data-auto-save-timeout]');&nbsp; &nbsp; &nbsp; if ($inputs.length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$inputs.each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if ((new Date()).getTime() - this.attributes['data-auto-save-timeout'].value >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.removeAttribute('data-auto-save-timeout');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;your_save_function(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;clearInterval(auto_save_timer); //stops the timer&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;auto_save_timer = null; //for checking if the timer is active,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//clearInterval() doesn't make it false&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//this prevents multiple timers from overlapping&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, 1000);&nbsp; }});https://jsfiddle.net/sjmdqhgu/