Question

我的任务是在幻灯片中制作一些图片，如果在5秒钟内没有点击前进和后退按钮（id = right和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（）3次，然后我每次在我的eventListeners中将其解除它以重置它。我的问题是：有没有办法去掉它一次并调用像time(call listnener for id='right')之类的eventListeners，然后在事件列表器中重置它就像clearInterval(a);无需重新输入。

Answer 1

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

我还将setInterval修改为setTimeout，因为在此设置中，呼叫被清除并且每次都重置。

{{1}}

使用setInterval（）调用EventListener

2 个答案: