Question

我想在此处向标题图片添加自动滚动：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次，但它只点击一次。我错过了什么？

Answer 1

我在你的帖子中理解的内容。如果单击该按钮，它将循环10次对吗？ (correct me if i am wrong) ..试试这个。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="button" id="btn" value="Click me">

＆＃13;

Answer 2

一般来说，页面仅在执行线程后重绘。您可能会发现您的功能正在模拟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

如果您尝试这种方法，我有兴趣听听它是否有效：）

JavaScript click（） - 不能多次使用

2 个答案: