간격을 지울 수없는 이유는 무엇입니까?

clearInterval이 저에게 맞지 않는 이유를 모르겠습니다. 간격에서 테이블 형식으로 2D 배열을 표시 한 다음 배열을 업데이트하고 계속해서 반복합니다.간격을 지울 수없는 이유는 무엇입니까?

clearInterval이 작동하지 않는 이유는 무엇입니까? 머리에

자바 스크립트 : 몸에

$(window).load(function() { 
    var tabl = document.getElementById('ordersTable'); 
    var l = tabl.rows.length; 
    var w = tabl.rows[0].cells.length; 
    alert("Width:" + w); 
    var array1 = new Array(l); 
    var array2 = new Array(l); 
    initialize(); 
    alert(JSON.stringify(array1)); 
    var st = setInterval(function() { 
     display(array1); 
     newArray(); 
     //alert(JSON.stringify(array1)); 
    }, 3000); 

    function stopTime() { 
     clearInterval(st); 
    } 

    function display(array) { 
     for (var i = 0; i < l; i++) { 
      for (var j = 0; j < w; j++) { 
       var tr = tabl.rows[i]; 
       var cll = tr.cells[j]; 
       var ct = cll.innerHTML = array[i][j]; 
       if (array[i][j] == 1) { 
        $(cll).css("color", "red"); 
       } else { 
        $(cll).css("color", "black"); 
       } 
       cll.id = array1[i][j]; 
      } 
     } 
    } 

    function initialize() { 
     for (var i = 0; i < l; i++) { 
      array1[i] = new Array(w); 
      array2[i] = new Array(w); 
      for (var j = 0; j < w; j++) { 
       var rand = Math.floor(Math.random() * 2); 
       array1[i][j] = rand; 
      } 
     } 
    } 

    function newArray() { 
     for (var i = 0; i < l; i++) { 
      for (var j = 0; j < w; j++) { 
       var rand = Math.floor(Math.random() * 2); 
       array1[i][j] = rand; 
      } 
     } 
    } 
});

HTML :

<table id="ordersTable"> 
    <tr><td>Row 1</td><td> Row 1.2</td><td>Row 1.3</td></tr> 
    <tr><td>Row 2</td><td> Row 2.2</td><td>Row 2.3 </td></tr> 
    <tr><td>Row 3</td><td> Row 3.2 </td><td>Row 3.3</td></tr> 
</table> 

<button onclick="stopTime()">Stop</button>

출처

2014-02-23 Nazariy1995

이동 바르 성 = ''(창) .load (함수() { – Grumpy

@SLaks 내가 당신의 코멘트를 upvoted하지만 그냥 가난한 들여 쓰기이었다 - 이것은 아니다 변수 문제 –

@BenjaminGruenbaum은 그 관념을 고쳐 주셔서 감사합니다! –

이유는 stopTime() 글로벌 기능이되지 않는 것입니다, 그래서 그것은 당신의 onclick="stopTime()" 찾을 수 없습니다.

수정하려면 stopTime() 함수와 st 변수를 전역 범위로 이동하십시오.

var st; 

function stopTime() { 
    clearInterval(st); 
} 

$(window).load(function() { 
    //... 
    st = setInterval(function() { 
     display(array1); 
     newArray(); 
     //alert(JSON.stringify(array1)); 
    }, 3000); 

    // ... 
});

또는는 onload 기능 내부의 onclick 처리기를 바인딩합니다.

$(window).load(function() { 
    //... 
    var st = setInterval(function() { 
     display(array1); 
     newArray(); 
     //alert(JSON.stringify(array1)); 
    }, 3000); 

    document.getElementById("my_button").onclick = function() { 
     clearInterval(st); 
    }; 

    //... 
});

<table id="ordersTable"> 
    <tr><td>Row 1</td><td> Row 1.2</td><td>Row 1.3</td></tr> 
    <tr><td>Row 2</td><td> Row 2.2</td><td>Row 2.3 </td></tr> 
    <tr><td>Row 3</td><td> Row 3.2 </td><td>Row 3.3</td></tr> 
</table> 

<button id="my_button">Stop</button>

출처

2014-02-23 23:19:56

~~그는 어떻게 고치겠습니까?~~ 와우, 그게 빠르다. –

사실 varialbe 로컬을 유지하면서로드 클로저 내부의 click-handler를 설정하는 것이 더 좋은 방법입니다 ... 전역 변수 사용/'window'에 속성 추가는 추악합니다. –

감사합니다. 그게 효과가 있었어. 내가 뭘 생각 했어? – Nazariy1995

당신은 전역 변수를 방지하고 동적으로 예를 들어, 수신기를 부착하고 폐쇄에 필요한 변수에 대한 참조를 유지하여 문제를 해결할 수 :

는 (버튼에 ID를 추가 또는 기타 식별 방법) :

<button type="button" id="stopButton">Stop</button>

로드 기능, 무언가 같이 다음 $ 위의

$(window).load(function() { 

    function stopTime() { 
     if (st) { 
      clearInterval(st); 
     } 
    } 
    var st = ...; 

    ... 

    $('#stopButton').click(function(){stopTime()}) 
});

출처

2014-02-24 00:01:07 RobG

간격을 지울 수없는 이유는 무엇입니까?

답변

관련 문제