用setInterval（）調用EventListener（）

我的任務是在幻燈片中製作幾張圖片，如果在5秒鐘內沒有點擊前進和後退按鈕（id = right和id = left），它應該自動地向前邁進，我成功了，但我覺得代碼很多。用setInterval（）調用EventListener（）

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);

因此，大家可以看到的問題是，我非常decleared我的setInterval（）3次，第一次在我的代碼，然後我在事件監聽器每次declear它重置。我的問題是這樣的：有沒有什麼方法可以刪除一次，然後調用像time(call listnener for id='right')這樣的事件監聽器，然後在事件列表器中將其重置爲clearInterval(a);而不必重新輸入。

來源

2016-05-10 Все Едно

一個乾淨的修復方法是通過$（'＃left，#right'）....合併兩個單擊事件處理程序....這將刪除多餘的代碼。 – sudheer

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);

來源

2016-05-10 20:12:33

嗨，當我測試你的腳本，我得到一個閃光燈，每4個電話在1方向我得到copletely空白屏幕 –

我的例子是4張圖片，這可能是你的問題？ –

@SimonSchüpbach不要只是轉儲一堆代碼。解釋原件出了什麼問題，以及你改變了什麼以解決問題。 – Barmar

我不確定這是否會這樣做。沒有實際測試它。但是，您可以將所有冗餘工作組合成一個可以調用的單一功能。我將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);

來源

2016-05-10 20:30:20

用setInterval（）調用EventListener（）

回答

相關問題