如何延迟数据库查询并忽略 JS 之间发生的请求？答案

【问题标题】：How to delay DB query and ignore requests that happen in between with JS?如何延迟数据库查询并忽略 JS 之间发生的请求？
【发布时间】：2021-03-16 15:53:12
【问题描述】：

我正在使用 Quill 作为我的 Node / Express Web 应用程序的富文本编辑器。

Quill API 有一个名为“on”(https://quilljs.com/docs/api/#on) 的方法，可以在每次编辑器选择或文本更改时触发一个事件。

我正在使用这种方法将编辑器的内容保存到 MySQL 数据库中，使用quill.root.innerHTM 以 HTML 格式捕获全部内容。

这很好用，但我的问题是这种方法会为用户的每次击键触发一个 POST 请求到我的 Express 端点。我不想让服务器不堪重负，也不需要保存每个击键变化。

我想到的一个解决方案是将数据库查询延迟 3 秒，并仅使用编辑器的最新内容触发一个请求。

我尝试使用setTimeout() 来实现这一点：

app.post('/editor', (req, res) => {
  let post = true;
  const id = req.query.id;
  const data = req.body.content;

  setTimeout(() => {
    if (post == true) {
      post = false;
      db.connection.query('UPDATE my_table SET content = ? WHERE id = ?', [data, id], (error) => {
        if (error) {
          res.status(500).send("Internal server error")
        }
        res.status(200).send();
      });
    }
    console.log('data posted');
  }, 3000);

});

如您所见，我尝试使用布尔值。我知道为什么这段代码不起作用，但我想不出一种方法来“忽略”时间间隔之间发生的请求，而只使用编辑器中的最新数据触发数据库查询。

谢谢！

【问题讨论】：

我对 quill 不熟悉，但乍一看，您可以在输入字符时将标志设置为 1，并创建一个间隔 (setInterval())，每隔 X 秒运行一次如果设置了标志，则发送查询（然后重置标志）
计时器/超时/间隔在这里不是正确的解决方案。简单的解决方案是通过计数字符来限制您的服务器调用，直到输入 x 个数字（您选择）。计数器变量将在事件处理程序外部设置为 0，并在内部递增。一旦达到魔法计数，发送服务器请求并将计数器重置为 0。
感谢 cmets！我不确定等待 x 个字符是否会正常工作。用户可以在某个不是 X 的倍数的数字后停止输入，从而导致最后一个字符不被保存。我想我仍然需要某种超时或间隔来保存剩余的字符。
我现在正在寻找一种使用“去抖动”功能的解决方案，例如这个库中的underscorejs.org/#debounce

标签： javascript mysql express timeout quill

【解决方案1】：

我设法使用 Underscore.js (http://underscorejs.org/#debounce) 中的“去抖动”解决了这个问题。真的很好用！

我没有触及服务器路由。我在前端实现了它。现在的代码如下所示：

        const quill = new Quill('#editor', options);

        function update() {
          let quillHtml = quill.root.innerHTML;
          let quillContent = {
            "contents": `${quillHtml}`
          };
          postData('/editor', id, quillContent);
        }

        const lazyUpdate = debounce(update, 1000);

        quill.on('text-change', lazyUpdate);

postData() 只是一个使用 fetch() 生成 POST 请求的辅助函数

【讨论】：