1

1 から 4 までの数字を 1 つずつ出力したいのですが、コードは次のとおりです。

脚本

<script>
$(document).ready(function(){
var b=1;
function cal(){

$('#print').html(b + '<br/>');
b++;
};
setInterval("cal()",5000);
})
</script>

HTML

<div id="print"></div>

しかし、それは機能していません。次のエラーが表示されます。

Uncaught ReferenceError: cal が定義されていません

それはなぜですか、どうすれば修正できますか?

4

3 に答える 3

3

修正

使い方setInterval

これは（後で説明する）正しいsetInterval()使用方法です：

setInterval(cal, 5000);

このコードを書くための可能な方法

$(document).ready(function(){
    var b = 0;
    function cal() {
        b++;
        $('#print').html(b + '<br/>');
        if (b === 4) {
            clearInterval(to);
        }
    };
    var to = setInterval(cal, 5000);
});​

jsFiddleデモ

もちろん、まだ改善の余地があります。たとえば、キャッシュすることができます$('#print')。毎回フェッチする必要はありません。

...
var $print = $('#print'); //save it to a variable
function cal() {
    b++;
    $print.html(b + '<br/>'); //use the cached version
    ...

問題

関数の代わりに文字列-> eval！

技術的には、最初のパラメータとして文字列をに渡すsetIntervalことができますが、を使用するのと同じevalです。私たちが知っているように、それevalは悪です。あなたが何をしているのかを本当に知っている場合にのみそれを使用してください。同じことが。にも当てはまりますsetTimeout。w3schoolsやその他の古いリソースで何を見たとしても、これらのメソッドに文字列を渡さないでください。関数を渡します。

evalのスコープsetInterval

evalwithを使用する際の問題の1つはsetInterval()、グローバルスコープの文字列でコードを実行しようとすることです。そのため、エラーが発生します。setIntervalで定義されwindow、そのスコープ内で実行されます。に渡されたクロージャのスコープ内にdocument.ready()あり、関数はこのスコープで定義されています。evalそれが存在しないグローバルスコープでそれを見つけようとします。

于 2012-05-18T10:12:06.917 に答える
2

これを試すこともできます：

var b = 1;
function call() {
    $('#print').append(b + '<br/>');
    b++;
    setTimeout(function() {
        if (b < 5) call();
    },5000);
};
call();

デモ

于 2012-05-18T10:25:56.537 に答える
1

cal()関数への文字列参照を提供するのではなくsetInterval、関数自体に次のように指定します。

var b = 1;    
function cal() {
    $('#print').html(b + '<br/>');
    b++;
};
setInterval(cal, 1000);

フィドルの例

また、現在のコードは4回の反復後も間隔を呼び出し続けるため、少し無駄になります。これを遅延のあるforループに変更するか、次のように4回の反復後にタイマーへの参照を破棄することができます。

var b = 1;    
function cal() {
    $('#print').html(b + '<br/>');
    b++;
    if (b > 4)
        clearInterval(timer);
};
var timer = setInterval(cal, 1000);

フィドルの例

于 2012-05-18T10:10:14.127 に答える