Ajax 调用 keyup 来进行不同的输入并设置超时

Question

我在尝试修复此逻辑时遇到问题。

该页面有多个字段，其想法是当用户停止写入时将输入值保存在数据库中。

这是代码：

var debounce = null;
        $overviewContainer.on('keyup change', 'input, textarea, select', function(){
            //<------------------Update Section Item ---------------->
            clearTimeout(debounce);
            console.log('aca se actualizando!');
            var savingMessage = '<div class="alert-container" style="width: 7%;"><div class="spinner spinner-alert" style="height: 60px; width: 60px;"></div>';
            $('#alerts').append(savingMessage);
            var $savingMessage = $(savingMessage).find('.spinner-alert');
            if($(this).attr('type') != 'file'){
                var $form = $(this).parents('form').first(),
                    $url = $form.attr('action');
                debounce = setTimeout(function(){
                    $.ajax({
                        url: $url,
                        type: 'POST',
                        data: $form.serialize(),
                        maxConcurrency: 3,
                        success: function success(response) {
                            console.log($savingMessage);
                            $savingMessage.hide();
                            $('#alerts').innerAlert('success', response.message);
                        },
                        error: function error(response) {
                            $('#alerts').innerAlert('error', response.message);
                        }
                    });
                }, 1200);
            }
        });

我有两个主要问题：

1. 第一个是如果用户在ajax完成之前离开页面，则不会保存该值。
2. 如果用户更新了一个字段，然后在 settimeout 开始之前开始更改另一个字段，则仅保存第二个字段，而忽略第一个字段。我不知道如何解决这个问题

对于第一个问题，如果存在微调器，我尝试使用 window.onbeforeunload 来解决此问题，以防止用户在未保存所有内容的情况下离开，但我不确定这是否是最好的方法。

对于第二个，我的理论是超时被覆盖，所以我正在考虑每次发生更改时创建一个函数，或者为字段创建唯一的 id，并拆分 ID 的函数，但我不确定关于这个。

Answer 1

添加一个beforeunload，查看保存是否完成，警告用户未保存。

let isUnsaved = false;

window.addEventListener("beforeunload", (event) => {
  if (isUnsaved) {
    event.preventDefault();
    return event.returnValue = '';
  }
});

$overviewContainer.on('keyup change', 'input, textarea, select', function() {
  //<------------------Update Section Item ---------------->
  clearTimeout(debounce);
  isUnsaved = true;
  console.log('aca se actualizando!');
  var savingMessage = '<div class="alert-container" style="width: 7%;"><div class="spinner spinner-alert" style="height: 60px; width: 60px;"></div>';
  $('#alerts').append(savingMessage);
  var $savingMessage = $(savingMessage).find('.spinner-alert');
  if ($(this).attr('type') != 'file') {
    var $form = $(this).parents('form').first(),
      $url = $form.attr('action');
    debounce = setTimeout(function() {
      $.ajax({
        url: $url,
        type: 'POST',
        data: $form.serialize(),
        maxConcurrency: 3,
        success: function success(response) {
          console.log($savingMessage);
          $savingMessage.hide();
          $('#alerts').innerAlert('success', response.message);
          isUnsaved = false;

        },
        error: function error(response) {
          $('#alerts').innerAlert('error', response.message);
          isUnsaved = false;
        }
      });
    }, 1200);
  }
});