Question

当我按下空格键时，该功能包括改变我身体的背景，因为你可以看到身体在5秒后变为蓝色，它变为蓝色，如果在5秒后变为蓝色，则变为红色。

我想让这个函数循环5次。

这是我的代码：

$(document).ready(function() {
    $(document).keypress(function(e) {
        if (e.which == 32) {
            function changeColor() {
                if ($('body').hasClass('yellow')) {
                    $('body').removeClass('yellow');
                    $('body').addClass('blue');
                } else if ($('body').hasClass('blue')) {
                    $('body').removeClass('blue');
                    $('body').addClass('red');
                }
            }
        }
        setInterval(changeColor, 5000);
    });
});

Answer 1

您需要计算间隔执行的次数，然后在满足最大次数clearInterval后拨打n。

为避免使用全局变量，创建调用间隔的新方法是最佳选择：

function setIntervalTimes(callback, milliseconds, times)
{
    var i=0;
    var interval = window.setInterval(function()
    {
       callback();

       if ( ++i === times ) {
           window.clearInterval(interval);
       }
    }, milliseconds);
}

现在你可以这样打电话给setInvervalTimes()：

function changeColor() {
  // Your logic...
}

$(document).ready(function() {
  $(document).keypress(function(e) {
    if (e.which == 32) {
      // Perform your logic 5 times in 5 second intervals
      setIntervalTimes(function () {
        changeColor();
      }, 5000, 5);
    }
  });
});

Answer 2

你从一个区间和功能中拿出一个计数器并使用它：

var times2toggle = 5;
var toggleColor = setInterval(changeColor, 5000);

function changeColor() {
    if( times2toggle--==0 ){ clearInterval( toggleColor ); }
    $('body').toggleClass('yellow blue');
}

我还在函数中添加了.toggleClass()。这可以完成您的代码所做的事情，但更容易阅读。如果它以黄色开头，则切换类将关闭黄色并打开蓝色。

如何在Jquery循环中执行此功能5次

2 个答案: