clearInterval（）不工作，並且沒有返回錯誤

Question

我想運行一個函數，當一個複選框被選中並停止該函數時，當複選框未被選中時。

這是我試了一下：

$('#auto').on('click', function() { 
    if ($(this).is(':checked')) { 
     // Interval 
     var autoInterval = window.setInterval(function() { 
      navi('next'); 
     }, 1500); 
    } 
    else { 
     clearInterval(autoInterval); 
    } 
}); 

問題是clearInterval()不工作，我沒有得到任何錯誤。

https://jsfiddle.net/n339tzff/9/

，如果我的代碼看起來像這樣它將工作：

// Interval 
var autoInterval = window.setInterval(function() { 
    navi('next'); 
}, 1500); 

// Auto Play 
$('#auto').on('click', function() { 
    if ($(this).is(':checked')) { 
     autoInterval; 
    } 
    else { 
     clearInterval(autoInterval); 
    } 
}); 

但後來我還有一個問題...我只想運行函數navi('next')當我點擊複選框和不是在一開始。

Answer 1

當您單擊時，它會調用setInterval並將呼叫結果存儲在autoInterval中，並在結束該功能後將其刪除。因此，您每次都在同一個電話中存儲並丟失變量的value。

在事件處理程序之外聲明autoInterval變量，以使其與事件處理程序的作用域無關。你也可以用IIFE包裝你的功能發生變異這個變量外

(function() { 

    var autoInterval; 

    $('#auto').on('click', function() { 
     if ($(this).is(':checked')) { 
     autoInterval = window.setInterval(function() { 
      navi('next'); 
     }, 1500); 
     } else { 
     clearInterval(autoInterval); 
     } 
    }); 

})(); 

Answer 2

應定義事件處理函數之外autoInterval，作爲事件運行後這個變量會被「拋棄」/UN -accessable。

var autoInterval = null; 

$('#auto').on('click', function() { 
    if ($(this).is(':checked')) { 
     autoInterval = window.setInterval(function() { 
      navi('next'); 
     }, 1500); 
    } 
    else if(autoInterval !== null) { 
     clearInterval(autoInterval); 
     autoInterval = null; 
    } 
});