Rumah > Artikel > hujung hadapan web > Bagaimana untuk membungkus kaedah setTimeout() dalam Promise?

Bagaimana untuk membungkus kaedah setTimeout() dalam Promise?

WBOYke hadapan: 2023-08-27 23:29:051258semak imbas

Kaedah

如何将 setTimeout() 方法包装在 Promise 中？

setTimeOut() melaksanakan beberapa kod atau fungsi selepas bilangan milisaat tertentu. Kadangkala, kita perlu menyelesaikan atau menolak janji selepas kelewatan tertentu, kita boleh menggunakan kaedah setTimeout() dengan janji.

Dalam JavaScript, janji ialah objek yang mengembalikan hasil operasi tak segerak. Di sini kita akan belajar menggunakan kaedah setTimeOut() untuk menyelesaikan atau menolak janji selepas kelewatan.

Contoh 1 (Janji tanpa kaedah setTimeOut())

Dalam contoh di bawah, kami menggunakan pembina Promise() untuk mencipta Promise baharu. Pembina Promise menerima fungsi panggil balik sebagai parameter, dan fungsi panggil balik melaksanakan kaedah resolve() untuk menyelesaikan Promise. Ia menunjukkan penggunaan asas Promise.

<html>
<body>
   <h2>Using the Promises without setTimeOut() method in JavaScript</h2>
   <div id = "content"> </div> <br />
   <button onclick = "start()"> Resolve Promise </button>
   <script>
      let content = document.getElementById('content');
      
      // function for promise example
      function start() {
         let promise = new Promise(function (resolve, reject) {
            resolve("Promise is resolved!");
         });
         promise.then((value) => {
            content.innerHTML = "The result from resolved promise is " + value;
         });
      } 
   </script>
</body>
</html>

Tatabahasa

Pengguna boleh menggunakan kaedah setTimeOut() dengan Promise mengikut sintaks berikut.

new Promise(function (resolve, reject) {
   setTimeout(function () {
      resolve();
   }, delay);
});

Dalam sintaks di atas, kami melaksanakan kaedah resolve() dalam kaedah setTimeOut(). Ia melaksanakan kaedah resolve() selepas "kelewatan" milisaat.

Contoh 2 (Janji dengan fungsi async dan kaedah setTimeOut())

Dalam contoh di bawah, kami telah mencipta fungsi tak segerak bernama "resolvePromise". Kami mencipta Janji dan menyimpannya dalam pembolehubah "sumPromise". Selepas kami menggunakan kata kunci await untuk menggantung pelaksanaan fungsi sehingga janji diselesaikan.

Pengguna boleh melihat dalam output bahawa setiap kali mereka menekan butang, ia menyelesaikan janji selepas 2000 ms.

<html>
<body>
   <h3>Using Promises with setTimeOut() method and async functions in JavaScript</h3>
   <div id = "content"> </div> <br>
   <button onclick = "resolvePromise()"> Resolve Promise </button>
   <script>
      let content = document.getElementById('content');
      
      // function for promise example
      async function resolvePromise() {
         let sumPromise = new Promise(function (resolve, reject) {
            setTimeout(function () {
               resolve("The sum of all data is 100.");
            }, 3000);
         });
         let result = await sumPromise;
         content.innerHTML = "The resolved promise's result is " + result;
      }
   </script>
</body>
</html>

Contoh 3 (Janji dengan kaedah blok then() dan setTimeout())

Dalam contoh di bawah, kami menggunakan blok then() untuk menyelesaikan Promise dan bukannya menggunakan sintaks tak segerak/menunggu seperti yang ditunjukkan dalam Contoh 2. Kami juga menggunakan setTimeOut() dalam Promise, seperti yang ditunjukkan dalam Contoh 2, untuk menyelesaikan janji selepas penangguhan.

<html>
<body>
   <h2>Using the Promises with setTimeOut() method in JavaScript</h2>
   <div id = "content"></div>
   <br>
   <button onclick = "resolvePromise()"> Resolve Promise </button>
   <script>
      let content = document.getElementById('content');
      
      // function for promise example
      function resolvePromise() {
         let promise = new Promise(function (resolve, reject) {
            setTimeout(function () {
               resolve("This promise is resolved after 2000 milliseconds");
            }, 2000);
         });
         promise.then(function (value) {
            content.innerHTML = "The resolved promise's result is " + value;
         });
      }
   </script>
</body>
</html>

Tutorial ini mengajar pengguna untuk membungkus kaedah setTimeOut() dalam Promise. Selain itu, kami menggunakan blok async/wait sintaks dan kemudian() untuk menyelesaikan Promise. Pengguna boleh melihat output contoh di atas, yang menyelesaikan janji selepas milisaat tertentu.

Atas ialah kandungan terperinci Bagaimana untuk membungkus kaedah setTimeout() dalam Promise?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 构造函数回调函数对象 promise 异步

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk membangunkan kelas generikArtikel seterusnya：Bagaimana untuk membangunkan kelas generik

Artikel berkaitan

Lihat lagi