задержка setTimeout не работает

Я пытаюсь обернуть голову вокруг setTimeout, но я не могу заставить его работать должным образом.

Я привел пример здесь:http://jsfiddle.net/timkl/Fca2n/

Я хочу, чтобы текст отсчитывался после нажатия якоря - но мой setTimeout Кажется, срабатывает в то же время, хотя я установил задержку в 1 сек.

Это мой 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();
});

});

любой намек на то, что я могу делать неправильно высоко ценится:)

16
javascript jquery settimeout

7 ответов

setTimeout принимает функцию в качестве аргумента. Вы выполняете функцию и передаете результат в setTimeout (таким образом, функция выполняется сразу). Вы можете использовать анонимные функции, например:

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

обратите внимание, что то же самое верно для setInterval.

39

вам нужно обернуть свои заявления в анонимные функции, а также пошатнуться ваши тайминги -

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

если вы установите все в 1000 шаги будут в значительной степени выполняться одновременно как setTimeout функция будет запускать задачу через 1 секунду после вызова функции не через 1 секунду после предыдущего вызова

5

вам нужно использовать функцию ссылка вызывается позже, когда таймер истекает. Оберните каждый оператор в анонимную функцию, чтобы он выполнялся не сразу, а по истечении таймера.

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

кроме того, вы хотите использовать другое значение задержки для каждого из них, чтобы таймеры не истекали одновременно. См. обновленную скрипку вhttp://jsfiddle.net/RqCqM/

2

существует положение для передачи аргументов функции. В вашем случае, вы можете сделать это

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

третий аргумент функции setTimeout будет передан в writeNumber.функция html

2

просто использовать 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

вам нужно использовать функции, которые будут вызываться после истечения тайм-аута; вы также можете использовать анонимную функцию, тогда ваша функция foo будет выглядеть так:

function foo(){

writeNumber = $("#target");

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

};
1

Я приземлился на этот вопрос. На него ответили адекватно, и я думаю, используя setInterval как предложил @Purag, вероятно, лучший подход для получения желаемого функционального поведения. Однако в исходном примере кода асинхронное поведение JavaScript не учитывалось. Это часто встречающаяся ошибка, которую я сделал сам не раз :).

Итак, в качестве примечания я хотел дать другое возможное решение для этого, которое имитирует первоначальную попытку, но это время не рассматривает Asynchronousity в JavaScript:

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

сейчас, конечно, это явно ужасный код!

Я дал рабочий JSFiddle этого в мой такой же вопрос. Этот код иллюстрирует так называемый пирамида судьбы. И это можно смягчить с помощью обещаний JavaScript, как показано в ответах на мой вопрос. Требуется некоторая работа, чтобы написать версию WriteNumber() это использует обещания, но тогда код можно переписать на что-то вроде:

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