Bagaimana untuk membungkus kaedah setTimeout() dalam Promise?-tutorial js-php.cn

Bagaimana untuk membungkus kaedah setTimeout() dalam Promise?

WBOY

Lepaskan： 2023-08-27 23:29:05

ke hadapan

1284 orang telah melayarinya

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>

Salin selepas log masuk

Tatabahasa

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

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!