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変数をイベントハンドラの外部に宣言し、イベントハンドラのスコープから独立させます。また、あなたは、イベントが実行された後に、この変数は、/国連破棄 "されるように、

(function() { 

    var autoInterval; 

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

})(); 

Answer 2

あなたは、イベントハンドラ関数の外でautoIntervalを定義する必要があり外にこの変数を変異させないようにIIFEであなたの関数をラップすることができます - アクセス可能。

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