0

以下のコードは、私がやろうとしていることのサンプルです。小規模です。このコードは、実際には間隔をクリアすることはなく、スタックを開始するだけです。ありがとう！

<script>
var num = 0;
var counter = setInterval('start_count()',1000);

function start_count(type){
    num++;
    document.getElementById('num_div').innerHTML = num;
}
function stop_count(){
   clearInterval(counter);
   num = 0;
}
</script>
<div id="num_div"></div>
<br>
<input type="button" value="Stop" onClick="stop_count()">
<input type="button" value="Start" onClick="counter = setInterval('start_count()',1000)">

助けてください！

4

4 に答える 4

4

に文字列を渡さないでくださいsetInterval。JS関数はファーストクラスのオブジェクトであるため、引数として渡したり、変数に割り当てたり、他の関数から返したりすることができます。あなたの例では、私は次のように書きます：

<input type="button" value="Start" id="intervalStart"/>
<input type="button" value="Start" id="intervalStop"/>

そして、JS：

window.onload = function()//not the best way, but just as an example
{
    var timer, num = 0, 
    numDiv = document.getElementById('num_div');//<-- only scan dom once, not on every function call
    document.getElementById('intervalStart').onclick = function(e)
    {
        this.setAttribute('disabled','disabled');//disable start btn, so it can't be clicked multiple times
        timer = setInterval(function()
        {
            numDiv.innerHTML = ++num;
        },1000);
    };
    document.getElementById('intervalStop').onclick = function(e)
    {
        document.getElementById('intervalStart').removeAttribute('disabled');//enable start again, you could do the same with disable btn, too
        clearInterval(timer);
        num = 0;
        numDiv.innerHTML = '';
    };
};

このコードにはもう少し作業が必要ですが、少なくともグローバル名前空間をそれほど汚染することはありません。
要素を参照するために変数を使用したことに注意してください。そうnum_divすれば、インターバルコールバック関数は1000msごとにその要素のDOM全体をスキャンする必要がありません。それほど多くはありませんが、jQueryセレクターまたはメソッドを使用するたびにgetElement(s)By*、JSはDOMをトラバースして要素を探す必要があることに注意してください。たくさん必要になる要素への参照を保持することは、より効率的なスクリプトになります。

于 2012-11-27T16:46:55.070 に答える
1

私はこのコードがあなたがやろうとしていたことをするだろうと思います：

<script>
    var num = 0;
    var counter;

    function start_interval() {
        counter = setInterval(function () { start_count() }, 1000)        
    }

    function start_count() {
        num++;
        document.getElementById('num_div').innerHTML = num;
    }
    function stop_count() {
        clearInterval(counter);
        num = 0;
    }
</script>
<div id="num_div"></div>
<br>
<input type="button" value="Stop" onClick="stop_count();">
<input type="button" value="Start" onClick="start_interval();">
于 2012-11-27T16:51:35.477 に答える
0 
<script>
    var num = 0;
    var counter = setInterval(start_count,1000);  
    function start_count(type){     
        num++;     
        document.getElementById('num_div').innerHTML = num;
    }
    function stop_count(){    
        clearInterval(counter);    
        num = 0;
    }
</script>
<div id="num_div"></div>
<br>
<input type="button" value="Stop" onClick="stop_count()">
<input type="button" value="Start" onClick="counter = setInterval(start_count,1000)">

これが作業バージョンです。ただし、コメントで述べたように、次の2つのうちの1つをasetIntervalまたはsetTimeout：に渡す必要があります。

実行する必要のあるコードを定義する関数：

setTimeout(function(){
  /* timeout code */
}, 1000);

または、呼び出したい関数への参照（引用符は除く）：

function myTimeoutFunction(){
  /* timeout code */
}
setTimeout(myTimeoutFunction, 1000);
于 2012-11-27T16:45:40.583 に答える
0

問題が何であるかを正確に明確にしていない。コードは正常に機能します（文字列をsetIntervalに渡すことに関するコメントは別として）。「開始」を複数回押すと複数の間隔が追加されるという問題がある場合は、そうです。時計がすでに動いているかどうかを確認することで、これを修正できます。

次に例を示します。

function startCounter() {
    if (!counter) {
        counter = setInterval(start_count,1000);
    }
}

function start_count(type){
    num++;
    document.getElementById('num_div').innerHTML = num;
}

function stop_count(){
   clearInterval(counter);
   counter = 0;
   num = 0;
}

これがフィドルです

于 2012-11-27T16:47:30.977 に答える