Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengosongkan pemasa dalam es6
Dua kaedah: 1. Gunakan clearTimeout() untuk mengosongkan pemasa setTimeout, sintaks "clearTimeout (nilai pulangan pemasa)"; 2. clearInterval() untuk mengosongkan pemasa setInterval, sintaks "clearInterval(nilai pulangan) )" .
Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.
Dua pemasa dalam JS
window.setTimeout([function],[interval])
Tetapkan pemasa dan tetapkan tunggu Apabila masanya tiba, kaedah yang sepadan dilaksanakan Apabila pelaksanaan kaedah selesai, pemasa berhenti.
window.setInterval([function],[interval])
Tetapkan pemasa dan tetapkan masa menunggu Apabila masa telah sampai, laksanakan kaedah yang sepadan.
Apabila pelaksanaan kaedah selesai, pemasa tidak berhenti Kaedah yang sepadan akan dilaksanakan semula setiap sekian lama pada masa hadapan sehingga kami mengosongkan pemasa secara manual.
Nota: setTimeout() hanya melaksanakan kod sekali. Jika anda ingin memanggilnya beberapa kali, gunakan setInterval() atau minta kod itu sendiri memanggil setTimeout() sekali lagi.
Nilai pulangan pemasa
Pemasa dalam JS mempunyai nilai pulangan dan nilai pulangan ialah nombor, mewakili pemasa semasa.
var timer1=window.setTimeout(function(){},1000); //timer1->1 当前是第一个定时器 var timer2=window.setTimeout(function(){},1000); //timer2->2` 当前是第二个定时器 var timer3=window.setTimeout(function(){},1000); //timer3->3 当前是第三个定时器
Perlu diingat bahawa walaupun pemasa dikosongkan, nilai pulangannya tidak akan dikosongkan, dan nilai pulangan pemasa yang ditetapkan kemudian akan terus beratur berdasarkan nilai pulangannya.
Cara mengosongkan pemasa
Jika pemasa tidak dikosongkan dalam masa, mungkin terdapat risiko limpahan memori. Jadi apabila kita menggunakan pemasa, kita perlu mempertimbangkan untuk mengosongkannya pada masa yang sesuai.
Pemasa jelas mempunyai dua fungsi:
Fungsi pemusnahan setTimeout ialah clearTimeout
Fungsi pemusnahan setInterval ialah clearInterval
objek setInterval atau objek setTimeout, kedua-dua objek pemasa ini hanya akan dikitar semula daripada ruang tindanan apabila objek tetingkap dimusnahkan. Anda tidak boleh memberitahu mesin kutipan sampah untuk mengitar semula secara automatik dengan menukar penunjuk pembolehubah kepada menghala ke nol. Jika anda berhasrat untuk memusnahkan objek setInterval dalam memori tindanan objek tetingkap sebelum objek tetingkap ditutup, anda hanya boleh memusnahkannya melalui clearInterval
clearTimeout(id_of_settimeout)
Definisi: Sekat/batalkan fungsi pelaksanaan berjadual yang ditetapkan oleh kaedah setTimeout().
Parameter: id_of_settimeout ialah nilai ID yang dikembalikan apabila memanggil fungsi setTimeout() Menggunakan pengecam pulangan sebagai parameter boleh membatalkan operasi pelaksanaan berjadual yang ditetapkan oleh setTimeout().
Nota: Untuk menggunakan kaedah clearTimeout(id_of_setinterval), gunakan pembolehubah global semasa membuat dan melaksanakan operasi berjadual:
var myVar = setTimeout(function(){ alert("Hello"); }, 3000); clearTimeout(myVar);
Sama ada setTimeOut perlu dibersihkan dalam masa
function testTimeout () { console.log('1111') console.log(setTimeout(testTimeout, 3000)); }
Kod di atas memanggil testTimeout secara rekursif, tetapi setTimeout akan sentiasa menjana objek setTimeout walaupun ia akan dikitar semula oleh GC, masa ini lebih berbahaya dan mungkin menyebabkan limpahan ingatan.
Jadi kita harus memanggil clearTimeout sebelum setiap setTimeout untuk mengelakkan objek setTimeout daripada terus dicipta dan tidak dikitar semula oleh GC.
var timeHandle = null; function testTimeout () { if (timeHandle) { // 调用之前,先清理,防止一直生成对象 // ps. setInterval 定时器也应该按这种模式处理 clearTimeout(timeHandle); timeHandle = null; } console.log('1111'); console.log(timeHandle = setTimeout(testTimeout, 3000)); }
clearInterval(id_of_setinterval)
Definisi: Boleh membatalkan/menghentikan operasi pelaksanaan berjadual yang ditetapkan oleh fungsi setInterval().
Parameter: id_of_setinterval ialah nilai ID yang dikembalikan apabila memanggil fungsi setInterval() Hanya dengan menggunakan pengecam pulangan sebagai parameter boleh operasi pelaksanaan berjadual yang ditetapkan oleh setInterval() dibatalkan.
Nota: Untuk menggunakan kaedah clearInterval(), gunakan pembolehubah global semasa mencipta dan melaksanakan operasi berjadual:
var myVar = setInterval(function(){ myTimer() }, 1000); clearInterval(myVar);
Sama ada setInterval perlu dibersihkan dalam masa
function testInterval () { console.log('1111') console.log(setInterval(testInterval, 3000)); }
Kod di atas memanggil testInterval secara rekursif, tetapi setInterval akan sentiasa menjana objek setInterval walaupun ia akan dikitar semula oleh GC, masa ini lebih berbahaya dan mungkin menyebabkan limpahan ingatan.
Jadi kita harus memanggil clearInterval sebelum setiap setInterval untuk mengelakkan objek setInterval daripada terus dicipta dan tidak dikitar semula oleh GC.
var timeHandle = null; function testInterval () { if (timeHandle) { // 调用之前,先清理,防止一直生成对象 clearInterval(timeHandle); timeHandle = null; } console.log('1111'); console.log(timeHandle = setInterval(testInterval, 3000)); }
Pengetahuan lanjutan: Gunakan setTimeout untuk mensimulasikan tingkah laku setInterval
Biasanya: menggunakan setTimeOut() secara rekursif, kesannya adalah bersamaan dengan menggunakan setInterval()
Faedah:
Kod dipermudahkan
Pastikan ketepatan urutan panggilan fungsi bagi baris gilir tak segerak Kecacatan setInterval akan membawa kepada jumlah data Apabila ia besar, susunan pelaksanaan panggilan fungsi dalam baris gilir tak segerak adalah tidak teratur. Sebagai contoh, sebelum pelaksanaan fungsi ini selesai, yang seterusnya akan dilaksanakan, tetapi tidak dengan rekursi Dalam rekursi, entiti seterusnya fungsi dibuat secara rekursif dalam ruang tindanan dan dipanggil selepas fungsi semasa dilaksanakan.
//实现的方法挺简单的 ,如下代码 //参数: 毫秒 需要执行的方法 function console1() { console.log(111); if(timer){ clearTimeout(timer); } timer = setTimeout(function(){ console1(); }, 3000); } console1()
[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]
Atas ialah kandungan terperinci Bagaimana untuk mengosongkan pemasa dalam es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!