web-dev-qa-db-ja.com

setTimeout遅延が機能しない

setTimeoutに頭を巻き付けようとしていますが、正常に動作しません。

ここに例を設定しました： http://jsfiddle.net/timkl/Fca2n/

アンカーがクリックされた後にテキストをカウントダウンしたいのですが、遅延を1秒に設定していても、setTimeoutが同時に起動するようです。

これは私のHTMLです：

<a href="#">Click me!</a>

<span id="target"></span>

これは私のJSです：

$(document).ready(function() {


function foo(){

    writeNumber = $("#target");

    setTimeout(writeNumber.html("1"),1000);
    setTimeout(writeNumber.html("2"),1000);
    setTimeout(writeNumber.html("3"),1000);
    };

$('a').click(function() {
 foo();
});

});

私が間違っている可能性があることについてのヒントは非常に高く評価されています:)

javascriptjquerysettimeout
19
timkl

setTimeout 関数を引数として取ります。関数を実行して、結果をsetTimeoutに渡します（そのため、関数はすぐに実行されます）。匿名関数を使用できます。次に例を示します。

setTimeout(function() {
    writeNumber.html("1");
}, 1000);

setIntervalについても同様です。

42
James Allardice

ステートメントを匿名関数でラップし、タイミングをずらす必要があります-

setTimeout(function(){writeNumber.html("1")},1000);
setTimeout(function(){writeNumber.html("2")},2000);
setTimeout(function(){writeNumber.html("3")},3000);

すべてを1000に設定すると、setTimeout関数は、前回のsetTimeout関数が終了しました。

デモ- http://jsfiddle.net/JSe3H/1/

5
ipr101

関数に引数を渡すための規定があります。あなたの場合、あなたはそれを行うことができます

setTimeout(writeNumber.html,1000,1);
setTimeout(writeNumber.html,1000,2);
setTimeout(writeNumber.html,1000,3);

setTimeout関数の3番目の引数は、writeNumber.html関数に渡されます

2
Achal Saraiya

後でタイマーが切れたときに呼び出されるように、関数referenceを使用する必要があります。各ステートメントを無名関数でラップして、すぐには実行されず、タイマーが切れたときに実行されるようにします。

setTimeout(function() { writeNumber.html("1"); },1000);

また、タイマーが同時に期限切れにならないように、それぞれに異なる遅延値を使用する必要があります。 http://jsfiddle.net/RqCqM/ で更新されたフィドルを参照してください

2
tvanfosson

setInterval()を使用するだけです。 ここ は私が思いついたものです。新しいJavaScriptは次のとおりです。

function foo(){
    writeNumber = $("#target");
    number      = 0;
    writeNumber.html(number);
    setInterval(function(){
        number = number+1;
        writeNumber.html(number);
    },1000);
    };
$('a').click(function() {
 foo();
});
1
Purag

タイムアウトが経過した後に呼び出される関数を使用する必要があります。匿名関数も使用でき、関数fooは次のようになります。

function foo(){

writeNumber = $("#target");

setTimeout(function() { writeNumber.html("1"); },1000);
setTimeout(function() { writeNumber.html("2"); },1000);
setTimeout(function() { writeNumber.html("3"); },1000);

};
1
Irvin Dominin

この質問にたどり着きました。それは適切に回答されており、@ Puragが示唆するようにsetIntervalを使用することは、おそらく望ましい機能動作を実現するための最良のアプローチです。ただし、最初のコード例では、JavaScriptの非同期動作を考慮していませんでした。これは頻繁に発生するエラーで、たまに自分で作ったものです:)。

補足として、私は最初の試みを模倣する別の可能な解決策を提供したかったのですが、今回はJavaScriptの非同期性を考慮します：

setTimeout(function() {
    writeNumber.html("1");
    setTimeout(function() {
        writeNumber.html("1");
        setTimeout(function() {
            writeNumber.html("1");
        }, 1000);
    }, 1000);
}, 1000);

もちろん、これは明らかにひどいコードです！

自分自身のSO質問 で動作するJSFiddleを指定しました。このコードは、いわゆる運命のピラミッドを例示しています。そして、これ私の質問への回答に示されているように、JavaScript Promiseを使用することで軽減できます。Promiseを使用するバージョンのWriteNumber()を作成するには少し手間がかかりますが、コードは次のように書き直すことができます。

writeNumAsync(0)
    .then(writeNumAsync)
    .then(writeNumAsync)
    .then(writeNumAsync);
0
Bart