Como definir o tempo de atraso em javascript

Eu tenho um pedaço de js no meu site para trocar imagens mas preciso de um atraso quando você clica na imagem uma segunda vez. O atraso deve ser de 1000ms. Então você clicaria no img.jpg e então o img_onclick.jpg apareceria. Você então clicaria na imagem img_onclick.jpg e então deveria haver um atraso de 1000ms antes da imagem img.jpg ser mostrada novamente.

Aqui está o código:

jQuery(document).ready(function($) {

    $(".toggle-container").hide();
    $(".trigger").toggle(function () {
        $(this).addClass("active");
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
    }, function () {
        $(this).removeClass("active");
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
    });
    $(".trigger").click(function () {
        $(this).next(".toggle-container").slideToggle();
    });
});
Manoj Sharma
Pergunta editada :em
Programação
javascript jquery
26º julho 2013 в 2:13
12 vistas
Solução

Utilize **setTimeout()***:

var delayInMilliseconds = 1000; //1 second

setTimeout(function() {
  //your code to be executed after 1 second
}, delayInMilliseconds);

Se você quiser fazer isso sem o "SetTimeout": Consulte esta pergunta.

jegtugado
Resposta editada :em
Comentários (2)
 
setTimeout(function(){

}, 500);

Coloque o seu código dentro do `{\ }``.

500 = 0,5 segundos

2200 = 2,2 segundos

etc.

maudulus
Resposta editada :em
Comentários (0)

Existem dois tipos (mais utilizados) de função timer em javascript setTimeout e setInterval (outros)

Estes dois métodos têm a mesma assinatura. Eles assumem uma função de retorno de chamada e retardam o tempo como parâmetro.

O setTimeout executa apenas uma vez após o atraso, enquanto o setInterval continua a chamar a função de retorno de chamada após cada milisecs de atraso.

ambos os métodos retornam um identificador inteiro que pode ser usado para limpá-los antes que o timer expire.

Estes dois métodos tomam um identificador inteiro retornado das funções acima "setTimeout" e "setInterval".

Exemplo:

setTimeout

alert("before setTimeout");

setTimeout(function(){
        alert("I am setTimeout");
   },1000); //delay is in milliseconds 

  alert("after setTimeout");

Se você executar o código acima você verá que ele alerta antes de setTimeout e depois de setTimeout finalmente ele alerta Eu sou setTimeout após 1sec (1000ms)

O que você pode notar pelo exemplo é que o setTimeout(...) é assíncrono, o que significa que não'não espere que o timer expire antes de ir para o próximo comando, ou seja, alert("depois de setTimeout");

Exemplo:

setInterval

alert("before setInterval"); //called first

 var tid = setInterval(function(){
        //called 5 times each time after one second  
      //before getting cleared by below timeout. 
        alert("I am setInterval");
   },1000); //delay is in milliseconds 

  alert("after setInterval"); //called second

setTimeout(function(){
     clearInterval(tid); //clear above interval after 5 seconds
},5000);

Se você executar o código acima você verá que ele alerta antes de definirInterval e depois de definirInterval*** finalmente ele alerta **Eu estou definidoInterval** 5 vezes após 1seg (1000ms) porque o setTimeout limpa o timer após 5 segundos ou então a cada 1 segundo você terá alerta **Eu estou definidoInterval`** Infinitamente.

Como o navegador faz isso internamente?

Eu vou explicar em poucas palavras.

Para entender que você tem que saber sobre fila de eventos em javascript. Há uma fila de eventos implementada no navegador. Sempre que um evento é acionado em js, todos esses eventos (como clique, etc.) são adicionados a essa fila. Quando seu navegador não tem nada para executar, ele pega um evento da fila e os executa um a um.

Agora, quando você chama setTimeout ou setInterval seu retorno de chamada é registrado em um timer no navegador e ele é adicionado à fila de eventos após o tempo determinado expirar e eventualmente o javascript pega o evento da fila e o executa.

Isto acontece assim, porque os motores javascript são de rosca única e só podem executar uma coisa de cada vez. Portanto, eles não podem executar outros javascript e manter o controle do seu timer. É por isso que estes temporizadores são registados com o browser (o browser não é de rosca simples) e pode manter o registo do timer e adicionar um evento na fila após o timer expirar.

O mesmo acontece com o setInterval somente neste caso o evento é adicionado à fila de novo e novamente após o intervalo especificado até que seja apagado ou a página do navegador seja atualizada.

**Nota***

O parâmetro de atraso que você passa para estas funções é o atraso mínimo hora de executar a ligação de retorno. Isto é porque depois que o timer expirar o navegador adiciona o evento à fila a ser executada pelo motor javascript, mas a execução da callback depende do seu posição dos eventos na fila e como o motor é rosqueado individualmente executará todos os eventos da fila um a um.

Portanto, a sua chamada de retorno pode, em algum momento, demorar mais do que o tempo especificado para ser chamada especialmente quando o seu outro código bloqueia a linha e não lhe dá tempo para processar o que's lá na fila.

E como eu mencionei o javascript é um único fio. Então, se bloqueares o fio por muito tempo.

Como este código

while(true) { //infinite loop 
}

Seu usuário pode receber uma mensagem dizendo **página não respondendo***.

Nadir Laskar
Resposta editada :em
Comentários (2)