設置和清除間隔變成多個間隔

我正在嘗試開發一個滑塊，如果用戶沒有按下後退或前進按鈕，滑塊每5秒鐘更換一次。設置和清除間隔變成多個間隔

但如果他（用戶）確實，間隔觸發多次......爲什麼？

我保存時間間隔在一個變量，所以我不知道爲什麼這不工作清除此變量...但看到自己：

 jQuery.fn.extend({ 
wrGallery: function() { 
    return this.each(function() { 

     // config 
     var wrClassActive = 'galerie_active'; 
     var wrTime = 5000; 
     // wrAutomaticDirection gibt an, in welche Richtung 
     // die Gallerie bei automatischem Wechsel wechseln soll (True = vorwärts/rechts) 
     var wrAutomaticDirection = true; 

     var wr = jQuery(this); 
     var wrGalleryContents = wr.find('.galerie_content'); 
     var wrGalleryContentsFirst = wr.find('.galerie_content:first-child'); 
     var wrBtnBack = wr.find('#galerie_backward'); 
     var wrBtnFor = wr.find('#galerie_forward'); 
     var wrTimer = 0; 
     var wrI = 0; 
     var wrOldActiveID = 0; 

     var wrInit = function() { 
      wrGalleryContents.each(function() { 
       wrI++; 
       jQuery(this).attr('id', wrI); 
       jQuery(this).css({ 
        display: 'none', 
        opacity: 0 
       }) 
      }) 

      wrGalleryContentsFirst.css({ 
       display: 'block', 
       opacity: 1 
      }) 
      wrGalleryContentsFirst.addClass('galerie_active') 
      wrStartTimer(); 
     } 

     var wrStartTimer = function() { 
      wrTimer = setInterval(function() { 
       wrChange(wrAutomaticDirection); 
      }, wrTime) 
     } 

     var wrStoppTimer = function() { 
      clearInterval(wrTimer); 
      wrTimer = 0; 
     } 

     var wrBackground = function(wrDirection) { 
      wrOldActiveID = wr.find('.' + wrClassActive).attr('id'); 
      wr.find('.' + wrClassActive).removeClass(wrClassActive); 

      if (wrDirection) { 
       wrOldActiveID++; 
       if (wrOldActiveID <= wrI) { 
        wr.find('#' + wrOldActiveID).addClass(wrClassActive); 
       } else { 
        wr.find('#1').addClass(wrClassActive); 
       } 
      } else { 
       wrOldActiveID--; 
       if (wrOldActiveID <= wrI) { 
        wr.find('#' + wrOldActiveID).addClass(wrClassActive); 
       } else { 
        wr.find('#3').addClass(wrClassActive); 
       } 
      } 
     } 

     var wrAnimate = function(wrDirection) { 
      wrGalleryContents.stop().animate({ 
       opacity: 0 
      }, 500); 
      wr.find('.' + wrClassActive).css({ 
       display: 'block' 
      }) 
      wr.find('.' + wrClassActive).stop().animate({ 
       opacity: 1 
      }, 500); 

     } 

     var wrChange = function(wrDirection) { 
      wrBackground(wrDirection); 
      wrAnimate(wrDirection); 

     } 

     wr.on('mouseenter', function() { 
      wrStoppTimer(); 
     }); 

     wr.on('mouseleave', function() { 
      wrStartTimer(); 
     }); 

     wrBtnBack.on('click', function() { 
      wrStoppTimer(); 
      wrStartTimer(); 
      wrChange(false); 
     }); 

     wrBtnFor.on('click', function() { 
      wrStoppTimer(); 
      wrStartTimer(); 
      wrChange(true); 
     }); 


     wrInit(); 

    }); 
}

}）;

感謝您閱讀;-)

來源

2013-07-09 a name

這個樣子的代碼只是一部分，你可以共享的完整代碼 –

'StoppTimer（真）;'爲什麼路過此處作爲參數的布爾？爲什麼在StoppTimer（）中使用這行'Timer = 0;'？ –

我已經清理了代碼，沒錯。其他代碼好好嘗試一下與工作的時間間隔......不認爲這將是有益的，給你完整的代碼......嚴重：d @roasted忘記布爾：d已經忘記刪除它... –

在wrStartTimer開始添加wrStoppTimer()電話：

var wrStartTimer = function() { 
     wrStoppTimer(); 
     wrTimer = setInterval(function() { 
      wrChange(wrAutomaticDirection); 
     }, wrTime) 
    };

另外兩個click功能，您有：

 wrStoppTimer(); 
     wrStartTimer();

你可以刪除wrStoppTimer()調用，因爲wrStartTimer()會調用它現在爲你。

另外一件事：如果你用var name = function() { ... }這樣的方式定義函數，你應該在關閉}之後加上一個分號，就像上面更新後的代碼一樣。

來源

2013-07-09 08:54:06

是的，我已經找到相同的解決方案，在這一刻你的答案來了！謝謝;-) 但我不明白，爲什麼這個多區間是可能的... 我保存的時間間隔在一個變量，這個變量清除間隔... 有人可以解釋這對我？ :-P –

代碼中有兩個地方在'wrStartTimer（）'本身出現：在'wrInit（）'和'wr.on（'mouseleave'，...）'中出現。它必須是其中的一個。如果你對此感到好奇，你可以通過註釋掉你在wrStartTimer（）裏面添加的wrStoppTimer（）來找出問題，並確認問題已經恢復。然後在這兩個孤獨的'wrStartTimer（）'調用之前添加一個'wrStoppTimer（）'。如果這不能解決它，請將其添加到另一個之前。其中一個應該修復它，你會知道它是什麼 - 我的猜測是'mouseleave'。（然後你可以把更強大的修復恢復。） –

設置和清除間隔變成多個間隔

回答

相關問題