Bagaimana untuk Mengendalikan Fungsi ClearTimeout() JavaScript?

Bagaimana Untuk Mengendalikan Fungsi Cleartimeout Javascript



JavaScript menawarkan ' yang telah ditetapkan clearTimeout ()” kaedah yang menguruskan fungsi tamat masa. Ia membolehkan pengguna membatalkan selang masa yang sebelum ini ditetapkan oleh ' setTimeout ()” fungsi. Ia menghentikan pelaksanaan blok kod yang berulang selepas selang masa tertentu. Ia kebanyakannya digunakan untuk laman web perbankan dan e-dagang untuk membatalkan tugas yang dijadualkan.

Siaran ini akan menerangkan cara mengendalikan fungsi JavaScript clearTimeout().







Bagaimana Mengendalikan Fungsi 'clearTimeout()' JavaScript?

' clearTimeout ()” fungsi membatalkan selang masa yang telah ditetapkan sebelum ini dengan bantuan “ setTimeout ()” fungsi. ' setTimeout ()” fungsi menetapkan selang masa untuk melaksanakan tugas tertentu berulang kali di dalamnya.



Sintaks

Kerja-kerja ' clearTimeout ()” kaedah bergantung pada sintaks asasnya yang ditulis di bawah:



clearTimeout ( id_of_settimeout )

Menurut sintaks di atas, ' clearTimeout ()' mengambil ' ID 'daripada' setTimeout ()” berfungsi dan menghentikan selang masa. Jika pengguna tidak melepasi id maka ia tidak melakukan apa-apa.





Mari laksanakan fungsi yang ditakrifkan di atas dengan menggunakan sintaks asasnya.

Contoh 1: Menggunakan Fungsi “clearTimeout()” untuk Menghentikan Selang Masa Tetapkan

Contoh pertama menggunakan ' clearTimeout ()” berfungsi untuk menghentikan selang masa yang ditetapkan.



Mula-mula lihat kod HTML berikut:

< pusat >
< hlm > Tunggu 2 saat, halaman akan memaparkan tajuk. < / hlm >
< h2 ID = 'H2' >< / h2 >
< butang onclick = 'berhenti()' > Hentikan Eksekusi! < / butang >
< / pusat >

Dalam baris kod di atas:

  • '< pusat >” menetapkan penjajaran elemen HTML yang diberikan ke tengah halaman web.
  • '< hlm >” teg menentukan pernyataan perenggan.
  • '< h2 >” tag ialah elemen tajuk kosong dengan id “ H2 ”.
  • '< butang >” tag memasukkan elemen butang yang memanggil “ berhenti ()' berfungsi apabila dilampirkan ' onclick ” peristiwa dicetuskan.

Seterusnya, gunakan ' clearTimeout ()” menggunakan blok kod yang dinyatakan:

< skrip >
const tetapkan masa = setTimeout ( mulakan , 2000 ) ;
fungsi mulakan ( ) {
dokumen. getElementById ( 'H2' ) . innerHTML = 'Selamat datang ke Linuxhint!'
}
fungsi berhenti ( ) {
clearTimeout ( tetapkan masa ) ;
}
skrip >

Dalam coretan kod di atas:

  • ' tetapkan masa ' pembolehubah menggunakan ' setTimeout ()' fungsi yang melepasi ' mulakan ' berfungsi sebagai parameter pertama dan ' yang ditentukan tiada milisaat ” sebagai parameter kedua. Fungsi ini melaksanakan ' mulakan ” fungsi dalam selang masa tertentu.
  • Seterusnya, tentukan “ mulakan ()” fungsi.
  • Dalam fungsi ini, ' document.getElementById ()' kaedah digunakan untuk mengakses elemen tajuk kosong yang idnya ialah ' H2 ” dan tambahkannya dengan pernyataan teks yang diberikan.
  • Selepas itu, ' berhenti ()' fungsi ditakrifkan, yang menggunakan ' clearTimeout ()' kaedah menghantar id ' setTimeout ()” berfungsi untuk menghentikan selang masanya.

Output (Sebelum Hentikan Pelaksanaan)

Sekarang output menunjukkan elemen tajuk dalam selang masa tertentu sebelum menghentikan selang masa yang ditetapkan melalui ' setTimeout ()” kaedah.

Output(Selepas Hentikan Pelaksanaan)

Klik butang yang diberikan menghentikan selang masa yang telah ditetapkan untuk memaparkan elemen tajuk.

Contoh 2: Menggunakan Fungsi 'clearTimeout()' untuk Menghentikan Fungsi

Contoh ini menggunakan ' clearTimeout ()” fungsi untuk menghentikan pelaksanaan fungsi:

Pertama, pergi melalui kod HTML yang disediakan:

< pusat >
< butang onclick = 'mula ()' > Mula mengira! < / butang >
< input taip = 'teks' ID = 'padang' >
< butang onclick = 'berhenti()' > Berhenti mengira! < / butang >
< / pusat >

Dalam blok kod di atas:

  • '< butang >” tag melampirkan “ onclick ” untuk menggunakan fungsi “start()” apabila ia diklik.
  • '< input >” tag menambah medan input dengan jenis “ teks ” dan id “medan”.
  • Seterusnya '< butang >” juga melampirkan “ onclick ' acara untuk memanggil ' berhenti ()” fungsi apabila acara ini dipecat.

Sekarang, gunakan ' clearTimeout ()” menggunakan baris kod ini:

< skrip >
biarkan kaunter = 0 ;
biarkan setTime ;
biarkan pemasa_hidup = 0 ;

fungsi mengira ( ) {
dokumen. getElementById ( 'padang' ) . nilai = kaunter ;
kaunter ++;
tetapkan masa = setTimeout ( mengira , 1000 ) ;
}

fungsi mulakan ( ) {
jika ( ! pemasa_hidup ) {
pemasa_hidup = 1 ;
mengira ( ) ;
}
}

fungsi berhenti ( ) {
clearTimeout ( tetapkan masa ) ;
pemasa_hidup = 0 ;
}
skrip >

Dalam baris kod di atas:

  • Pertama, ' biarkan ” kata kunci mengisytiharkan tiga pembolehubah “ kaunter”, “setTime”, dan “timer_on ”.
  • Seterusnya, ' mengira ()” fungsi ditakrifkan.
  • Dalam definisinya, ' document.getElementById() Kaedah ' digunakan untuk mengakses medan input tambahan menggunakan idnya ' padang ” dan tambahkannya dengan nilai “ kaunter ” pembolehubah.
  • Sekarang, naikkan nilai ' kaunter ” pembolehubah.
  • Akhir sekali, gunakan ' setTimeout ()” kaedah untuk melaksanakan pelaksanaan “ mengira ()” fungsi dalam selang masa tertentu.
  • Selepas itu, tentukan fungsi bernama ' mulakan ()”.
  • Dalam fungsi ini, ' jika pernyataan ” digunakan yang menyatakan syarat iaitu jika “ imer_on ' tidak ' pada ' maka ia sama dengan ' 1 ' dan juga ' mengira ()” fungsi dipanggil.
  • Sekarang, fungsi lain ditakrifkan bernama ' berhenti ()”.
  • Dalam definisinya, ' clearTimeout ()' kaedah digunakan dengan melepasi id ' setTimeout ()” kaedah iaitu “ tetapkan masa ”.

Pengeluaran

Dapat diperhatikan bahawa ' Mula mengira butang ” memulakan kiraan yang bertambah selepas setiap 1 saat. Kiraan ini dihentikan dengan mengklik pada “ Berhenti mengira! butang ”.

Itu sahaja tentang mengendalikan fungsi clearTimeout() dalam JavaScript.

Kesimpulan

' clearTimeout ()” fungsi mengendalikan selang masa yang ditentukan dengan bantuan “ setTimeout ()” fungsi. Ia melaksanakan tugas ini dengan menghantar id bagi “setTimeout()” berfungsi sebagai parameter pentingnya. Ia digunakan untuk membatalkan tugas yang dilakukan dalam selang masa tertentu yang ditetapkan menggunakan ' setTimeout ()” fungsi. Siaran ini telah menerangkan secara praktikal prosedur untuk mengendalikan fungsi JavaScript clearTimeout().