Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Pengenalan terperinci tentang cara menggunakan fungsi penangkapan selang masa dalam Vue
Pengenalan terperinci tentang cara menggunakan fungsi penangkapan selang masa dalam Vue
- PHPzasal
- 2023-04-13 10:46:04778semak imbas
Dengan pembangunan berterusan teknologi Internet, teknologi bahagian hadapan berubah setiap hari, dan pelbagai rangka kerja pembangunan telah muncul. Antaranya, Vue, sebagai pendatang baharu dalam bidang pembangunan bahagian hadapan, telah mendapat sokongan majoriti pembangun kerana ciri-cirinya yang ringan dan mudah digunakan.
Dalam Vue, terdapat fungsi yang sangat praktikal - penangkapan selang masa, yang boleh menjadikan kod kami lebih cekap dan elegan. Artikel ini akan memperkenalkan secara terperinci cara menggunakan fungsi penangkapan selang masa dalam Vue.
1. Pemasa Vue
Pemasa dalam Vue ialah alat yang sangat praktikal yang membolehkan kami melakukan operasi tertentu dalam selang masa tertentu. Dalam Vue, pemasa dilaksanakan melalui dua fungsi: setTimeout dan setInterval.
- fungsi setTimeout
Fungsi setTimeout merujuk kepada melaksanakan sekeping kod selepas masa yang ditentukan. Sintaks asas adalah seperti berikut:
setTimeout(function() {
//执行要延迟执行的代码
}, 延迟时间);
Antaranya, masa tunda adalah dalam milisaat, menunjukkan berapa milisaat selepas itu kod yang akan ditangguhkan dilaksanakan.
Sebagai contoh, jika kita ingin mengeluarkan "Hello World" selepas 1 saat, kita boleh menulisnya seperti ini:
setTimeout(function() {
console.log("Hello World");
}, 1000);
- fungsi setInterval
Fungsi setInterval ialah Merujuk kepada melaksanakan sekeping kod setiap masa tertentu. Sintaks asas adalah seperti berikut:
setInterval(function() {
//执行要周期执行的代码
}, 周期时间);
Antaranya, masa kitaran adalah dalam milisaat, menunjukkan berapa milisaat kod yang akan dilaksanakan secara berkala dilaksanakan.
Contohnya, jika kita ingin mengeluarkan "Hello World" setiap 1 saat, kita boleh menulisnya seperti ini:
setInterval(function() {
console.log("Hello World");
}, 1000);
Fungsi penangkapan selang masa Vue
Vue Fungsi penangkapan selang masa sangat praktikal dalam pembangunan sebenar Ia boleh melakukan operasi tertentu dalam masa tertentu Contohnya, selepas pengguna melengkapkan input, menangguhkan untuk tempoh masa sebelum meminta antara muka boleh mengurangkan beban dengan berkesan. pada pelayan dan meningkatkan prestasi aplikasi. Mari kita lihat cara menggunakan fungsi penangkapan selang masa dalam Vue.
Dalam Vue, fungsi penangkapan selang masa boleh dilaksanakan menggunakan mekanisme pemerhatian kedalaman jam tangan yang disediakan oleh Vue. Apabila kita ingin mendengar sesuatu harta, Vue akan mencetuskan fungsi panggil balik secara automatik apabila nilai harta itu berubah.
- Sintaks asas penangkapan selang masa
Sintaks asas tangkapan selang masa adalah seperti berikut:
watch: {
属性名: {
handler: function (val) {
setTimeout(function() {
console.log('值已经改变了，新值为：' + val);
}, 延迟时间);
},
deep: true,
},
Di mana, bila-bila masa nilai nama atribut berlaku Apabila menukar, fungsi akan dipanggil secara automatik dan kod yang kami takrifkan akan dilaksanakan selepas masa tunda yang ditentukan.
Atribut dalam menunjukkan kedalaman hierarki atribut yang akan diperhatikan Jika ditetapkan kepada benar, semua subsifat atribut akan dipantau Jika ditetapkan kepada palsu, hanya subsifat langsung atribut tersebut akan dipantau. Jika atribut dalam tidak ditetapkan, ia lalai kepada palsu.
Sebagai contoh, jika kita ingin memantau perubahan nama dan mengeluarkan "Nama anda telah berubah" 1 saat selepas nama bertukar, kita boleh menulis seperti ini:
watch: {
name: {
handler: function (val) {
setTimeout(function() {
console.log('您的名字已经改变');
}, 1000);
},
deep: true,
},
}
- Lengah Contoh aplikasi bergambar
Berikut adalah contoh aplikasi praktikal Selepas kami selesai menaip dalam kotak carian, kami menangguhkan selama 1 saat sebelum meminta antara muka untuk mendapatkan hasil carian adalah seperti berikut :
<template>
<div>
<input type="text" v-model="searchText" @input="handleInput">
<div v-if="searchResults.length > 0">
<ul>
<li v-for="item in searchResults">{{ item }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
searchResults: [],
}
},
watch: {
searchText: {
handler: function (val) {
setTimeout(() => {
this.search();
}, 1000);
},
deep: true,
},
},
methods: {
search() {
//在此处发去请求获取搜索结果
this.searchResults = ['搜索结果1', '搜索结果2'];
},
handleInput() {
this.searchResults = [];
},
},
}
</script>
Dalam kod di atas, kami menghantar permintaan dalam kaedah carian, memperoleh hasil carian dan memaparkan hasil pada halaman. Apabila nilai dalam kotak input pengguna berubah, carian ditangguhkan selama 1 saat untuk mengurangkan beban pada pelayan.
3. Ringkasan
Fungsi penangkapan selang masa dalam Vue boleh membantu kami melaksanakan kod dalam selang masa tertentu dalam pembangunan sebenar, dengan itu meningkatkan prestasi aplikasi dan kebolehselenggaraan kod. Pelaksanaan penangkapan selang masa perlu dilaksanakan melalui mekanisme pemerhatian kedalaman jam tangan Vue, dan masa tunda yang sesuai dan fungsi panggil balik boleh ditetapkan. Semasa proses pembangunan, kami boleh menggunakannya secara fleksibel mengikut keperluan sebenar, menjadikan kod kami lebih cekap dan elegan.
Atas ialah kandungan terperinci Pengenalan terperinci tentang cara menggunakan fungsi penangkapan selang masa dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!