Задержка Setinterval функции

Question

Я пытаюсь отложить, когда щелкает первое изображение, потому что оно срабатывает до того, как оно выходит на экран. Может быть, мне нужно поместить его в оператор if else?

// Instagram hacks

//  Search field
// let Searchtest= prompt("Please enter the hashtag you want to like","Trending");

// var search = document.querySelector('.x3qfX').value = "#" + Searchtest;

document.querySelector(".glyphsSpriteSafari__outline__24__grey_9").click();
let firstPicture = document.querySelector("div._9AhH0");
firstPicture.click();
let likesGiven = 0;
setInterval(() => {
  let heart = document.getElementsByClassName(
      "glyphsSpriteHeart__outline__24__grey_9"
    ),
    arrow = document.querySelector(".coreSpriteRightPaginationArrow");

  if (heart[1]) {
    heart = heart[1].parentElement;
    likesGiven++, heart.click();
  }
  arrow.click();
  console.log(`You've liked ${likesGiven} post(s)!`);
}, 2000);

// Button Liker

My Last Attempt Run this in your console from instagrams homepage and you u will see what 

я имею в виду

document.querySelector(".glyphsSpriteSafari__outline__24__grey_9").click();
    let firstPicture = document.querySelector("div._9AhH0");
    if (firstPicture){
        firstPicture.click();

    }

Answer 1

Хорошо, вот оно: возможно, вам следует подождать, пока документ загрузится, похоже, вы можете сделать это с помощью DOMContentLoaded evenListener, а затем в обратном вызове onready вы можете выполнить функцию щелчка: см. Пример ниже

DOM не изменился в ES6, ES6 предоставляет новые функции JavaScript, вот и все.В чистом js-событии для загруженного dom существует документ, готовый из jquery-эквивалента

document.addEventListener("DOMContentLoaded",function(){ //do something here });

Модули, работающие с деревом DOM, могут иметь прослушиватель внутри или должны использоваться после готовности dom.Я создал пример функции DOM, чтобы показать, что я имею в виду:

var DOM=function(selector){

 document.addEventListener("DOMContentLoaded",()=>{

 this.element=document.querySelector(selector);

 if (typeof this.callback === 'function')
 this.callback();

});

};

//HERE WE HAVE CALLBACK WHEN OUR MODULE CAN BE USED
DOM.prototype.onReady=function(callback){

 this.callback=callback;

};

DOM.prototype.getElement=function(){
//example object method

return this.element;

};

DOM.prototype.click=function(){

return this.element.click

};

Пример использования:

document.querySelector(".glyphsSpriteSafari__outline__24__grey_9").click();
var d=new DOM("div._9AhH0");
firstPicture.onReady(()=>{

firstPicture.click();

});
//your other code

Модули должны быть независимыми от DOM, поэтому создание модулей, которые экспортируют элементы DOM напрямую, является очень неправильной практикой.,Таким образом, это может быть сделано двумя способами:

Модули должны получать селекторные объекты DOM в атрибутах и ​​должны вызываться после того, как DOM будет готов.Таким образом, ваш модуль не знает, где он вызывается, но ему нужна готовая структура DOM.В этой ситуации обратный вызов DOM ready находится только в главном файле, который использует модули и вызывает их.

Модули могут иметь несколько прослушивателей, готовых к DOM, но также нам нужна некоторая информация, когда можно использовать модуль (эту ситуацию я показал в примереи функция onReady).

Answer 2

Вы можете попробовать цикл while, который немного спит, а затем проверяет, появился ли нужный элемент в dom.

Добавьте эту функцию сна.

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

Теперь поместите этот фрагмент кода в начало вашего метода, где firstPicture не найден.Это заставит скрипт ждать 10 секунд, если он не найдет элемент, а затем попытается снова.Как только он найдет элемент, ваш код продолжит работу, как и ожидалось.

while( null == document.querySelector("div._9AhH0") ) {
  sleep( 100 );
}