Kā iestatīt laika kavēšanos javascript

Man ir šis js gabals manā tīmekļa vietnē, lai pārslēgtu attēlus, bet man ir nepieciešama aizkave, kad jūs noklikšķiniet uz attēla otro reizi. Aizkavei jābūt 1000 ms. Tātad jūs noklikšķiniet uz img.jpg, tad parādīsies img_onclick.jpg. Pēc tam jūs noklikšķiniet uz img_onclick.jpg attēla, tad vajadzētu būt 1000ms kavēšanās pirms img.jpg tiek parādīts vēlreiz.

Šeit ir kods:

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
Rediģēts jautājums 27priekšpusdienari1t jūnijā 2017 в 9:56
Programmēšana
javascript jquery
26pēcpusdienari4t jūlijā 2013 в 2:13
13 skati
Risinājums

Izmantojiet setTimeout():

var delayInMilliseconds = 1000; //1 second

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

Ja vēlaties to darīt bez setTimeout: Skat. šis jautājums.

jegtugado
Rediģēta atbilde 27priekšpusdienari4t oktobrī 2017 в 2:21
Komentāri (2)
 
setTimeout(function(){

}, 500);

Ievietojiet savu kodu { } iekšpusē

500 = 0,5 sekundes

2200 = 2,2 sekundes

utt.

maudulus
Rediģēta atbilde 29pēcpusdienari1t novembrī 2016 в 8:17
Komentāri (0)

Ir divi (visbiežāk izmantotie) taimera funkciju veidi javascript setTimeout un setInterval (cits).

Abām šīm metodēm ir vienāds paraksts. Tās kā parametru pieņem atpakaļsaukuma funkciju un aizkaves laiku.

setTimeout izpilda tikai vienu reizi pēc kavēšanās, bet setInterval turpina izsaukt atpakaļsaukuma funkciju pēc katras kavēšanās milisekundes.

Abas šīs metodes atdod veselu skaitli, ko var izmantot, lai tās dzēstu pirms taimera darbības beigām.

clearTimeout un clearInterval abas šīs metodes izmanto veselu skaitli, kas atgriezts no iepriekš minētajām funkcijām setTimeout un setInterval.

Piemērs:

setTimeout

alert("before setTimeout");

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

  alert("after setTimeout");

Ja palaidīsiet iepriekšminēto kodu, redzēsiet, ka tas brīdina `pirms setTimeout un pēc tam `pēc setTimeout un visbeidzot tas brīdina `I am setTimeout pēc 1sec (1000ms).

Piemērā var pamanīt, ka setTimeout(...) ir asinhronais, kas nozīmē, ka tas negaida, kamēr beidzas taimeris, pirms pāriet pie nākamā paziņojuma, t. i., alert("after setTimeout");.

Piemērs:

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);

Ja palaidīsiet iepriekš minēto kodu, redzēsiet, ka tas brīdina `pirms setInterval un pēc tam `pēc setInterval un visbeidzot brīdina Ja esmu setInterval 5 reizes pēc 1 sekundes (1000ms), jo setTimeout notīra taimeri pēc 5 sekundēm vai arī ik pēc 1 sekundes jūs saņemsiet brīdinājumu Ja esmu setInterval Bezgalīgi.

Kā pārlūkprogramma to iekšēji dara??

Es īsi paskaidrošu.

Lai to saprastu, jums jāzina par notikumu rindu javascript. Pārlūkprogrammā ir ieviesta notikumu rinda. Ikreiz, kad js tiek aktivizēts notikums, visi šie notikumi (piemēram, klikšķis utt. ) tiek pievienoti šai rindai. Kad pārlūkprogrammai nav nekā, ko izpildīt, tā paņem notikumu no rindas un izpilda tos vienu pēc otra.

Tagad, kad jūs izsaucat setTimeout vai setInterval, jūsu atpakaļsaukums tiek reģistrēts pārlūkprogrammas taimerim, un pēc noteiktā laika beigām tas tiek pievienots notikumu rindai, un beigās javascript paņem notikumu no rindas un izpilda to.

Tas notiek tāpēc, ka javascript dzinējs ir vienpavediens, un tas var izpildīt tikai vienu darbību vienlaicīgi. Tādējādi tie nevar izpildīt citus javascript un sekot līdzi jūsu taimerim. Tāpēc šie taimeri tiek reģistrēti pārlūkprogrammā (pārlūkprogramma nav vienpavediena), un tā var sekot līdzi taimerim un pievienot notikumu rindā pēc taimera darbības beigām.

Tas pats notiek ar setInterval, tikai šajā gadījumā notikums tiek pievienots rindai atkal un atkal pēc noteiktā intervāla, līdz tas tiek dzēsts vai pārlūka lapa tiek atsvaidzināta.

Piezīme

Šīm funkcijām nododamais aiztures parametrs ir minimālā aizture. laiks atpakaļsaukuma izpildīšanai. Tas ir tāpēc, ka pēc taimera darbības beigām pārlūkprogramma pievieno notikumu rindā, lai to izpildītu ar javascript dzinējs, bet atpakaļsaukuma izpilde ir atkarīga no jūsu notikuma pozīcijas rindā, un, tā kā dzinējs ir vienpavediens, tas izpildīs visus rindā esošos notikumus pa vienam.

Tādējādi jūsu atpakaļsaukuma izsaukšana dažkārt var aizņemt vairāk laika nekā norādītais kavēšanās laiks, īpaši tad, ja jūsu cits kods bloķē pavedienu un nedod tam laiku apstrādāt rindā esošos notikumus.

Un, kā jau minēju, javascript ir viena pavediena sistēma. Tātad, ja jūs bloķējat pavedienu uz ilgu laiku.

Piemēram, šāds kods

while(true) { //infinite loop 
}

Jūsu lietotājs var saņemt ziņojumu, ka lapa neatbild.

Nadir Laskar
Rediģēta atbilde 9priekšpusdienari4t jūnijā 2017 в 6:37
Komentāri (2)