Javascript 使用setInterval（）调用EventListener

我的任务是在幻灯片中制作一些图片，如果不在5秒内单击前进和后退按钮（代码中的id=右，id=左），它应该会自动向前移动，我成功了，但我觉得代码太复杂了

var counter = 1;
$('#left').on('click', function peter() {
    clearInterval(time);
    time = setInterval(function () {
        var id = '#' + counter;
        $(id).attr('class', 'hidden');
        counter++;
        if(counter === 4){
            counter = 1;
        }
        id = '#' + counter;
        $(id).attr('class', 'visible');
    },3000);

    var id = '#' + counter;
    $(id).attr('class', 'hidden');
    counter--;
    if (counter === 0) {
        counter = 3;
    }
    id = '#' + counter;
    $(id).attr('class', 'visible');
});

$('#right').on('click', function () {
    clearInterval(time);
    time = setInterval(function () {
        var id = '#' + counter;
        $(id).attr('class', 'hidden');
        counter++;
        if(counter === 4){
            counter = 1;
        }
        id = '#' + counter;
        $(id).attr('class', 'visible');
    },3000);

    var id = '#' + counter;
    $(id).attr('class', 'hidden');
    counter++;
    if(counter === 4){
        counter = 1;
    }
    id = '#' + counter;
    $(id).attr('class', 'visible');
});


var time = setInterval(function peter() {
    var id = '#' + counter;
    $(id).attr('class', 'hidden');
    counter++;
    if(counter === 4){
        counter = 1;
    }
    id = '#' + counter;
    $(id).attr('class', 'visible');
},3000); 

因此，正如您所看到的问题是，我几乎取消了setInterval（）的三次清除，第一次是在代码中，然后每次都在eventListeners中取消清除以重置它。我的问题是：有没有办法将其清除一次并调用eventListeners，如

time（calllistener for id='right'）

，然后在eventListeners中，将其重置为

clearInterval（a）

；无需重新键入。

var counter=1；
var counter = 1;
var time;
function intervalFunction(offset)
{
      var id = '#' + counter;
      $(id).attr('class', 'hidden');
      counter += offset;
      if(counter > 4)
          counter = 1;
      else if(counter < 1)
         counter = 4;
      id = '#' + counter;
      $(id).attr('class', 'visible');
}

function startInterval(offset){
    if(time)
        clearInterval(time);
    intervalFunction(offset);
    time = setInterval(function () {
       intervalFunction(1);
    },3000);
}
$('#left').on('click', function peter() {
   startInterval(-1);
});

$('#right').on('click', function () {
    startInterval(1);
});

startInterval(1);

var时间；
函数间隔函数（偏移）
{
变量id='#'+计数器；
$（id）.attr（'class'，'hidden'）；
计数器+=偏移量；
如果（计数器>4）
计数器=1；
否则如果（计数器<1）
计数器=4；
id=“#”+计数器；
$（id）.attr（'class'，'visible'）；
}
功能startInterval（偏移）{
如果（时间）
清除间隔（时间）；
间隔函数（偏移）；
时间=设置间隔（函数（）{
间隔功能（1）；
},3000);
}
$（'#左'）。在（'click'，函数peter（）{
startInterval（-1）；
});
$（'#right'）。在（'click'，函数（）{
startInterval（1）；
});
startInterval（1）；

var计数器=1；
var时间；
函数间隔函数（偏移）
{
变量id='#'+计数器；
$（id）.attr（'class'，'hidden'）；
计数器+=偏移量；
如果（计数器>4）
计数器=1；
否则如果（计数器<1）
计数器=4；
id=“#”+计数器；
$（id）.attr（'class'，'visible'）；
}
功能startInterval（偏移）{
如果（时间）
清除间隔（时间）；
间隔函数（偏移）；
时间=设置间隔（函数（）{
间隔功能（1）；
},3000);
}
$（'#左'）。在（'click'，函数peter（）{
startInterval（-1）；
});
$（'#right'）。在（'click'，函数（）{
startInterval（1）；
});
startInterval（1）；

我不确定这样做是否可行。实际上并没有先测试它。但您可以将所有冗余工作合并到一个您将调用的函数中。我将clicktype参数添加到函数中，并使用它来确定是应该增加还是减少计数器的值

我还将setInterval修改为setTimeout，因为在这个设置中，每次调用都会被清除和重置

var counter = 1;
var timeoutdelay = 3000;

function OnChangeSlide(clicktype) {
    clearTimeout(time);
    var id = '#' + counter;
    $(id).attr('class', 'hidden');
    counter = counter + (clicktype=='#left' ? -1 : 1);
    if (counter === 0) {
        counter = 3;
    } else if (counter === 4) {
        counter = 0;
    }
    id = '#' + counter;
    $(id).attr('class', 'visible');
    time = setTimeout(function() { OnChangeSlide('#right'); }, timeoutdelay);
} 

$('#left').on('click', function() { OnChangeSlide('#left'); } );
$('#right').on('click', function() { OnChangeSlide('#right'); } );

time = setTimeout(function(){ OnChangeSlide('#right'); }, timeoutdelay);

---

我不确定这是否行得通。实际上并没有先测试它。但您可以将所有冗余工作合并到一个您将调用的函数中。我将clicktype参数添加到函数中，并使用它来确定是应该增加还是减少计数器的值

我还将setInterval修改为setTimeout，因为在这个设置中，每次调用都会被清除和重置

var counter = 1;
var timeoutdelay = 3000;

function OnChangeSlide(clicktype) {
    clearTimeout(time);
    var id = '#' + counter;
    $(id).attr('class', 'hidden');
    counter = counter + (clicktype=='#left' ? -1 : 1);
    if (counter === 0) {
        counter = 3;
    } else if (counter === 4) {
        counter = 0;
    }
    id = '#' + counter;
    $(id).attr('class', 'visible');
    time = setTimeout(function() { OnChangeSlide('#right'); }, timeoutdelay);
} 

$('#left').on('click', function() { OnChangeSlide('#left'); } );
$('#right').on('click', function() { OnChangeSlide('#right'); } );

time = setTimeout(function(){ OnChangeSlide('#right'); }, timeoutdelay);

---

一个干净的修复方法是将两个单击事件处理程序合并为$（“#left，#right”）。。。。这将删除冗余代码。一个干净的修复方法是将两个单击事件处理程序合并$（“#left，#right”）。。。。这将删除多余的代码。嗨，当我测试你的脚本时，我会得到一个闪光，在一个方向上每4次调用，我会得到完全空白的屏幕。我的示例是4张图片，这可能是你的问题吗？@SimonSchüpbach不只是转储一堆代码。解释原版有什么问题，以及你修改了什么来修复它。谢谢你的回答，但我不得不问为什么我的主题被否决了，我想我解释得很好，这个问题并不愚蠢，我是说像[max value of int32]（）这样的主题获得1k的投票，我的被否决了，我请求了一些关于解决问题的算法的帮助，witch对我来说毫无意义不客气，我不是那个否决你问题的人。我现在就去投票。嗨，当我测试你的脚本时，我得到一个闪光，在一个方向上每4次调用，我就得到一个完全空白的屏幕。我的示例是4张图片，这可能是你的问题吗？@SimonSchüpbach不仅仅是转储一堆代码。解释原版有什么问题，以及你修改了什么来修复它。谢谢你的回答，但我不得不问为什么我的主题被否决了，我想我解释得很好，这个问题并不愚蠢，我是说像[max value of int32]（）这样的主题获得1k的投票，我的被否决了，我请求了一些关于解决问题的算法的帮助，witch对我来说毫无意义不客气，我不是那个否决你问题的人。我现在就投票。