Айнур Ярулин

На основе ответа Rsa97, написал вот такой код.

const deleted = [], updated = []
for (let oldidx = 0, newidx = 0; oldidx < current_data.length || newidx < new_data.length;) {
  
  if (newidx >= new_data.length || current_data[oldidx]?.id < new_data[newidx].id) {
    deleted.push(current_data[oldidx])
    oldidx++
    continue
  }
  
  if (oldidx >= current_data.length || current_data[oldidx].id > new_data[newidx]?.id || !lodash.isEqual(new_data[newidx], current_data[oldidx])) {
    updated.push(new_data[newidx])
    oldidx++
    newidx++
    continue
  }
  
  oldidx++
  newidx++
}

Мне было важно, чтобы обновлённые и добавленные данные были в одном массиве,
поэтому я сделал именно так. Сейчас время работы ~1.5 секунды
Еще появился вариант использовать свой метод, но заменить find на бинарный поиск,
но я его не тестировал.

Решил проблему.

Проблема была в том, что при таком использовании
const axios = require('axios').default
VS Code показывает подсказки, но при запуске кода показывает ошибки.

А если импортировать так
const axios = require('axios')
то VS Code не показывает подсказки, но код будет работать

В итоге написал вот такое решение:

async function getData(id) {
   const data = myArray.find(obj => obj.id == id)

   if (data) return data
   else {
      await new Promise(resolve => setTimeout(resolve, 60))

      const response = await fetch(`https://server/api/${id}`)  
      return await response.json()
   }
}

Использовал lodash. Код:

const _ = require('lodash')

const newArray = array_2
const oldArray = array_1


// возвращает новые и обновлённые данные
const changed = newArray.filter(newitem => {
    const olditem = oldArray.find(o => o.id == newitem.id)
    return !_.isEqual(newitem, olditem)
  })

  

  const deleted = oldArray.filter(olditem => {
    const newitem = newArray.find(n => n.id == olditem.id)
    return !_.isEqual(newitem, olditem)
  }).filter(item => { // теперь нужно достать только удалённые данные, а обновлённые проигнорить.
    const item = changed.find(cd => cd.name == item.name)
    return !item
  })

Codepen: Тутъ, немного измените под себя

<label>
  <input type="checkbox">
</label>
<label>
  <input type="checkbox">
</label>
<label>
  <input type="checkbox">
</label>
<button disabled>Кнопка</button>

const inputs = [...document.querySelectorAll('input')]
const button = document.querySelector('button')

const onInput = () => {
  if(document.querySelector('label.checked')) {
    button.disabled = false
  } else {
    button.disabled = true
  }
}

inputs.forEach(input => input.addEventListener('input', function(event) {
  if (event.target.checked) {
    event.target.closest('label').classList.add('checked')
  } else {
    event.target.closest('label').classList.remove('checked')
  }
  onInput()
}))

А всё, сделал так, чёт тупанул
import 'https://ссылка на библиотеку'

Поскольку я тугодум, то мне пришлось долго разбираться в коде ksnk, но в конечном итоге я решил попробовать полностью переписать код алгоритма победы и у меня получилось, сейчас я вроде знаю как он работает.
Всем спасибо!

Код: https://codepen.io/squadcoder/pen/bGwwBLp?editors=0010 (очень сильно закомментировал)

Короче хз, как всё работало раньше, но решил проблему вот так:

const фывы = ['keydown', 'submit'].forEach(event => {
  // код
})

типо надо в переменную запихнуть код

Вообщем функция НЕ работала, потому что я писал её в JS файле который был подключён с атрибутом defer.
Я написал функцию в HTML файле и всё заработало.

Ну вроде как-то так

кнопка.addEventListener('click', function() {
  const переменная = инпут.value
  блокКудаХочешьВставитТекст.textContent = переменная
})