JavaScript Как построить такой алгоритм?

Question

Необходимо сделать три действия на веб странице.

Действие №1 - кликать по ссылке

Действие №2 - ожидать появления класса

Действие №3 - получить/составить список

Скрипт первого и третьего действия у меня есть (см.ниже), если их вставить в консоль поочерёдно, к примеру вставляем первый скрипт запускаем, после появления ссылок запускаем третий скрипт, то всё это работает.

Но мне нужно составить один полноценный скрипт, в котором будет происходить в первую очередь нажатие на ссылку, ожидание появления класса, только после этого вывод списка.

Чтобы реализовать ожидание мне скорее всего необходимо использовать MutationObserver или DOMInserted (Listener), чтобы реализовать последовательность Promise или Async/Await. Но я не очень хорошо знаю эти темы

Помогите пожалуйста как правильно построить такой алгоритм?

Действие №1

document.querySelector('#dle-content > div.section > ul > li:nth-child(3)').click();

Действие №3

(function() {
    var elements = Array.from(document.querySelectorAll('.cdn_download_item span:first-child'));
    var linksArray = new Array();
    for (element of elements) {
        linksArray.push(element.innerText);
    }

    return linksArray;
})();

Решил все это через MutationObserver Теперь необходимо обернуть все это в одну функцию которая будет возвращать массив linksArray, как это сделать?

var target = document.body;
const config = { 
    childList: true,
    attributes: true, 
    characterData: true, 
    subtree: true, 
    //attributeFilter: ["id"],
    attributeOldValue: true, 
    characterDataOldValue: true 
}

const callback = function(mutations)
{
    var linksArray = new Array();
    if(document.querySelector(".cdn_download_item"))
    {
    var elements = Array.from(document.querySelectorAll('.cdn_download_item span:first-child'));
    for (element of elements) {
        linksArray.push(element.innerText);
    }
    console.log(linksArray); //HERE!!!!!!!!!!!!!!!!!!!!!!!!!!
    }
}

const observer = new MutationObserver(callback);
observer.observe(target, config);
document.querySelector('#dle-content > div.section > ul > li:nth-child(3)').click();

Answer 1

Создайте свою коллекцию, которая будет вас уведомлять о заполнении.

Кроме этого, классы в элементы добавляются методами element.classList.add или element.classList.toggle, их можно можно модифицировать таким образом, чтобы они после добавления класса, записывали элемент в вашу коллекцию.

см. комментарии по коду ниже.

const link = document.querySelector('.link')
const listItems = Array.from(document.querySelectorAll('.list__item'))

//ваша коллекция, принимает максимальную длину и колбек на завершение
class MyCollection {
  constructor(maxLength, onComplete){
    this.maxLength = maxLength
    this.collection = []
    this.complete = onComplete
  }
  
  add(item){
    this.collection.push(item)
    if (this.collection.length == this.maxLength){
      this.complete()
      console.log('Печать коллекции')
      console.log(this.collection)
    }
  }
}


//ваш коллбек на завершение
const doSomethingOnComplite = () => {
  //ваши действия
  console.log('Всё добавлено')
}

//создаем коллекцию передаем длину вашего исходного списка элементов и коллбек на завершение
const myItems = new MyCollection(listItems.length, doSomethingOnComplite)


//заглушка на фетч
let fetchTimeout = () => {
  console.log('start request')
  
  return new Promise(function () {
    setTimeout(function () {
      console.log('get response')
      listItems.forEach((item)=>{
        item.classList.add('added-class')
      })
    }, 2000);
  });
}

//обработчик нажатия на ссылку
link.onclick = (event) => {
  event.preventDefault()
  fetchTimeout()
}

//модифицируем добавление класса 
listItems.forEach((item)=>{
  //сохраняем стандартный обработчик
  item.classList.defaultAdd = item.classList.add
  
  //модифицируем
  item.classList.add = (...args) => {
    //выполняем стандартное добавление класса
    item.classList.defaultAdd(...args)
    myItems.add(item)
  }
})

<a class="link" href="#">link</a>
<ul class="list">
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">3</li>
</ul>

БЛОГ НА HUSL

JavaScript Как построить такой алгоритм?

Ответы (1 шт):