jQuery的：使用的setInterval

Question

我試着去創建兩個計數器，當我按downKey我想C1的開始計數，當我按下keyLeft我想停止第一計數器並開始C2的算....我知道，我需要使用clearInterval()功能，但我不知道，我需要使用它，這裏是一個JSFiddle 來看看我的意思

HTML：

<div id="left"></div> 
<div id="down"></div> 

JS：

$('body').keydown(function (e) { 
    switch (e.which) { 
    case 39: 
     clearInterval(down_move); 
     var i=0; 
     var right_move = setInterval(function(){ 
     $('#left').html(i); 
     i++ 
     }, 1000) 
     break; 
    case 40: 
     clearInterval(right_move); 
     var j = 0; 
     var down_move = setInterval(function(){ 
     $('#down').html(j) 
       j++; 
     }, 1000); 
     break; 
    default: 

    } 
    e.preventDefault(); 
}); 

Answer 1

需要聲明down_move和right_move的keydown之外：

var right_move, down_move; 
$('body').keydown(function (e) { 
    switch (e.which) { 
    case 39: 
     clearInterval(down_move); 
     var i=0; 
     right_move = setInterval(function(){ 
     $('#left').html(i); 
     i++ 
     }, 1000) 
     break; 
    case 40: 
     clearInterval(right_move); 
     var j = 0; 
     down_move = setInterval(function(){ 
     $('#down').html(j) 
       j++; 
     }, 1000); 
     break; 
    default: 

    } 
    e.preventDefault(); 
}); 

Answer 2

它似乎是一個範圍的問題，這裏是我會怎麼做它： updated fiddle

var Interval = function(intervalFunc, selector){ 
    var interval; 
    this.start = function(){ 
    interval = setInterval(intervalFunc, 1000); 
    }, 
    this.stop = function(){ 
    clearInterval(interval); 
    } 
} 

var i = 0; 
var rightBtnInterval = new Interval(function downInterval(){ 
     $('#right').html(i) 
       i++; 
     }); 

var j = 0; 
var downBtnInterval = new Interval(function downInterval(){ 
     $('#down').html(j) 
       j++; 
     }); 



$('body').keydown(function (e) { 
    switch (e.which) { 
    case 39: 
     rightBtnInterval.stop(); 
     downBtnInterval.start(); 
     break; 
    case 40: 
     downBtnInterval.stop(); 
     rightBtnInterval.start(); 
     break; 
    default: 

    } 
    e.preventDefault(); 
}); 

Answer 3

你必須在功能外存儲區間停止。
警告左邊的ASCII碼是37.

這裏是一個JSFiddle看到我的變化：

var storeInterval = null; 
 
$('body').keydown(function (e) { 
 
    switch (e.which) { 
 
    case 37: 
 
     clearInterval(storeInterval); 
 
     var i=0; 
 
     storeInterval = setInterval(function(){ 
 
     $('#left').html(i); 
 
     i++ 
 
     }, 1000) 
 
     break; 
 
    case 40: 
 
     clearInterval(storeInterval); 
 
     var j = 0; 
 
     storeInterval = setInterval(function(){ 
 
     $('#down').html(j) 
 
\t \t \t \t j++; 
 
     }, 1000); 
 
     break; 
 
    default: 
 

 
    } 
 
    e.preventDefault(); 
 
});

<div id="left"></div> 
 
<div id="down"></div>