Question

我对javascript很陌生，所以如果我犯了错误，请耐心等待。我正在设计一个网站，允许用户通过按一下按钮来更改背景，这一切都很好，而且很好，但是我希望图像能够能够延时骑行。本质上，我希望用户能够单击按钮来更改背景，但是我还希望在设置的时间段后在后台单击相同按钮的情况下在后台运行javascript循环，这可能吗？

更改背景的代码如下：

$(document).ready(function () {

    var i = 0;

    $("#n").click(function () {
        i++;
        if (i > 16) { i = 1; };
        $('body').css('background-image', 'url(img/' + i + '.jpg)');
    });

    $("#p").click(function () {
        i--;
        if (i <= 0) { i = 16; };
        $('body').css('background-image', 'url(img/' + i + '.jpg)');
    });
});

所用按钮的代码为：

<button id="n" class="btn">Nxt</button>
<button id="p" class="btn">Prv</button>

Answer 1

我的建议是不要模拟点击，而只需调用与点击相同的函数即可。

所以让我们做一个可以被调用的函数：

function increment() {
  i++;
  if ( i > 16 ){ i = 1; };
  $('body').css('background-image',  'url(img/' + i + '.jpg)');  
}

然后，我们可以将其用于您已经拥有的常规点击：

$("#n").click(increment)

我们还可以定义对该函数的重复调用：

setInterval(increment, 1000)

setInterval非常适合非时间敏感这样的任务。查看提供的链接以了解其工作原理，如果要停止它，如何取消它...

@Ritesh Ganjewala在her answer中写了一个漂亮的小片段，向您展示了setInterval的作用。

@trincot还具有an answer，虽然它理解起来有点复杂，但是通过使用相同的函数 crement 和 decrement ，您可以减少重复代码。 em>您的柜台。编写某些内容时，您应该努力做到这一点。这称为DRY principle。

Answer 2

您可以使用setInterval进行循环-

setInterval(() => {
  console.log('this will repeat every 500 milliseconds');
}, 500);

Answer 3

根据设计，您无法使用JavaScript创建用户输入。如果您考虑一下，这是有道理的，某些浏览器功能（如请求权限）只有在用户执行操作后才能完成。您不希望网站在没有您输入的情况下同意授予权限。

因此，在您的情况下，最好的办法是让事件侦听器（用于用户输入）和setTimeout或requestAnimationFrame（用于自动循环）调用同一函数。

document.getElementById('n').addEventListener('click', nextColor);
document.getElementById('p').addEventListener('click', prevColor);

var i = 0;

function nextColor() {
  i++;
  if ( i > 16 ){ i = 1; };
  document.body.style.backgroundImage = `url(img/${i}.jpg)`;
}

function prevColor() {
  i--;
  if ( i <= 0 ){ i = 16; };
  document.body.style.backgroundImage = `url(img/${i}.jpg)`;    
}

setInterval(nextColor, 5000);

Answer 4

不要尝试将点击事件发送到按钮。而是隔离执行此单击操作的功能，然后使用setTimeout执行该功能。您可能还希望在用户再次单击时重置正在进行的超时。

这是看起来如何：

$(document).ready(function(){
    var i = 0;
    var delay = 1000; // number of milliseconds 
    var timer = setTimeout(next, delay); // <-- set the time out

    function next(step=1) { // optional argument that should be 1 or -1
        i = (i + 16 + step) % 16; // Use modulo arithmetic to rotate in the range [0..15]
        $('body').css('background-image',  'url(img/' + (i+1) + '.jpg)'); 
        clearTimeout(timer); // interrupt the ongoing time out ...
        timer = setTimeout(next, delay); // <-- and start it again
    }

    $("#n").click(next);

    $("#p").click(next.bind(null, -1)); // bind the argument to be -1
});

Answer 5

是的，有可能...

单击要更改背景颜色的按钮时，您还可以启动超时，该超时将在指定的时间段后调用一个函数（回调函数）（在您的情况下，该函数将更改图像），而setinterval将执行在指定的时间间隔后重复相同的操作。

$(document).ready(function(){

var i = 0;

  function increment() {
    i++;
    if ( i > 16 ){ i = 1; };
    $('body').css('background-image',  'url(img/' + i + '.jpg)');  
  }

  function decrement() {
    i--;
    if ( i <= 0 ){ i = 16; };
    $('body').css('background-image',  'url(img/' + i + '.jpg)');  
  }

  $("#p").click(function(){
    increment();
    setInterval(increment, 1000);
  }

  $("#n").click(function(){
    decrement();
    setInterval(decrement, 1000);
  } 

}

Answer 6

好吧，我从几个回答的人中发现了一些东西，我现在得到的是：

<script>

    setInterval(() => {
      $("#n").click();
    }, 7000);

</script>

这具有每7秒点击一次我想要的按钮的效果，它非常完美，谢谢大家的帮助！

有没有一种方法可以使javascript循环反复按下按钮？

6 个答案: