Блог

Я хочу добавить автоматическую прокрутку к изображениям заголовков здесь: https://listify-demos.astoundify.com/classic/listing/the-drake-hotel /

Так document.querySelector('.slick-next').click(); что можно сделать щелчок, и я пытаюсь заставить его работать в цикле. Запускаем следующее в консоли JS:

 function myscroller() {
    document.querySelector('.slick-next').click();
}

for (var i = 1; i < 10;   i) {
    myscroller();
}
  

Я думал, что он должен нажать следующую кнопку 10 раз, но он нажимает ее только один раз. Чего мне не хватает?

За то, что я понимаю в вашем сообщении. Если кнопка нажата, она будет повторяться 10 раз, верно? (correct me if i am wrong) .. Вот попробуйте это.

 function myscroller()
{
alert("Click Loop");
}
$("#btn").click(function(){
loopbtn();
});
function loopbtn(){
for (var i = 0; i < 10;   i) {
myscroller();
}
}  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="button" id="btn" value="Click me">  

Вообще говоря, страница перерисовывается только после выполнения потока. Вероятно, вы обнаружите, что ваша функция эмулирует 10 кликов, а затем перерисовывает страницу / выполняет анимацию в конце всего этого. Попробуйте использовать window.setTimeout() , чтобы сделать каждый щелчок отдельным процессом:

 for (var i = 1; i < 10;   i) {
    window.setTimeout(myscroller, i * 100); // each click 0.1 seconds apart
}
  

Я не тестировал это, но я думаю, что в качестве альтернативы jQuery справляется с этим довольно хорошо — если вы укажете ему эмулировать несколько событий подряд, он фактически ожидает завершения каждого из них, прежде чем перейти к следующему:

 jQuery('#my_element').click().click().click() // etc
  

Если вы попробуете этот подход, мне было бы интересно услышать, сработал ли он 🙂