Как поставить задержку в JS?

Question

Может все делаю не правильно, только учусь.

На сериальном сайте в видео появляется кнопка пропустить музыкальную заставку. Код каждые 2 секунды проверяет изменение селектора

<div class="vjs-overlay 
            vjs-overlay-bottom-left 
            vjs-overlay-skip-intro 
            vjs-overlay-background 
            vjs-hidden"

когда пропадает vjs-hidden выполняется клик и заставка перематывается.

Как усыпить код на 15 минут и ждать когда появится кнопка следующая серия?

Столкнулся с тем что setInterval как выполнялся каждые 2 секунды так и выполняется не читая переменную time. Скорее всего в JS можно решить это куда более простым и эргономичным решением.

Буду рад вашим примерам.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

let a = 0
let time = 2000

console.log("скрипт старт");

function run() {
  console.log("run");
  let elem = document.querySelector("div.vjs-overlay:nth-child(6)")
  let hidden = elem.classList[4]
  if (hidden != "vjs-hidden") {
    document.querySelector('div.vjs-overlay:nth-child(6)').click() 
    a = 1;
    time = 90000
    console.log("задержка 15 мин");
  }
};

function run1() {
  console.log("run1");
  let elmNext = document.querySelector("div.vjs-overlay:nth-child(8)")
  let hidde = elmNext.classList[4]
  if (hidde != "vjs-hidden") document.querySelector('div.vjs-overlay:nth-child(8)').click();
};


setInterval(function() {
  if (a == 0) {
    run();
  } 
  else if (a == 1) {
    run1();
  }
  
  console.log("скрипт работает")
}, time);

Решение вот такое подсказали в коментах, наблюдать за мутацией элементов.

// Выбираем целевой элемент
var target = document.querySelector("div.vjs-overlay:nth-child(6)");

// Конфигурация observer (за какими изменениями наблюдать)
var config = {
    attributes: true,
    childList: true,
    subtree: true
};

// Колбэк-функция при срабатывании мутации
var callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        } else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
            document.querySelector('div.vjs-overlay:nth-child(6)').click();
            observer.disconnect();
        }
    }
};

// Создаём экземпляр наблюдателя с указанной функцией колбэка
var observer = new MutationObserver(callback);

// Начинаем наблюдение за настроенными изменениями целевого элемента
observer.observe(target, config);

Answer 1

Быстрое решение использовать setTimeout, который будет всегда использовать обновленную переменную.

let time = 100

function startInterval() {
  setTimeout(() => {
    console.log(time)
    time += time
    startInterval()
  }, time)
}

startInterval()

А по хорошему, как это уже указали в комментах, надо следить за элементом и полностью отказаться от интервалов.

const bt = document.querySelector('div')

setInterval(() => {
  bt?.classList.toggle('border-class')
}, 1000)

new MutationObserver(() => {
  console.log(`Класс "border-class" ${bt?.classList.contains('border-class') ? 'установлен' : 'удален'}`)
}).observe(bt, {
  attributes: true,
  attributeFilter: ['class']
})

.some-class {
  border: 5px solid black;
  width: 300px;
  font-size: 36px;
  text-align: center;
}

.border-class {
  border-color: red;
}

<div class="some-class border-class">Злая Кнопка</div>

БЛОГ НА HUSL

Как поставить задержку в JS?

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