Блог

Главная - Вопросы по программированию - Как отложить запрос к БД и игнорировать промежуточные запросы с помощью JS?

Как отложить запрос к БД и игнорировать промежуточные запросы с помощью JS?

#javascript #mysql #express #timeout #quill

#javascript #mysql #выразить #тайм-аут #quill

Вопрос:

Я использую Quill в качестве редактора расширенного текста для моего веб-приложения Node / Express.

В 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);

});

Как вы можете видеть, я пытался использовать логическое значение. Я знаю, почему этот код не работает, но я не мог найти способ «игнорировать» запросы, которые происходят между временными интервалами, и запускать запрос к БД только с последними данными из редактора.

Спасибо!

Комментарии:

1. Я не знаком с quill, но на первый взгляд кажется, что вы могли бы установить флаг равным 1 при вводе символа и создать interval ( setInterval() ), который выполняется каждые X секунд для отправки запроса, если флаг установлен (а затем сбросить флаг)

2. таймеры / таймауты / интервалы здесь не являются правильным решением. Простое решение состоит в том, чтобы ограничить ваши разделяющие вызовы путем подсчета символов до тех пор, пока не будет введено число x (выбранное вами). Переменная counter будет установлена в 0 вне обработчика событий и увеличена внутри. Как только будет достигнут магический счетчик, отправьте запрос на сервер и сбросьте счетчик на 0.

3. Спасибо за комментарии! Я не уверен, что ожидание x количества символов будет работать хорошо. Пользователь может перестать печатать после определенного числа, которое не кратно X, в результате чего последние символы не сохраняются. Я думаю, мне все равно понадобится какой-то тайм-аут или интервал для сохранения оставшихся символов.

4. Сейчас я ищу решение с использованием функции «debounce», подобной той, что в этой библиотеке underscorejs.org/#debounce

Ответ №1:

Мне удалось решить проблему, используя «debounce» из 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() — это просто вспомогательная функция для генерации POST-запроса с использованием fetch()