Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

जावास्क्रिप्ट में लूप में देरी कैसे जोड़ें?

<घंटा/>

लूप में देरी जोड़ने के लिए, जावास्क्रिप्ट में सेटटाइमआउट () विधि का उपयोग करें। लूप में विलंब जोड़ने के लिए कोड निम्नलिखित है -

उदाहरण

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>Adding delay in a loop in JavaScript</h1>
<div class="result"></div>
<button class="Btn">Start</button>
<h3>Click on the above button to start the loop</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   BtnEle.addEventListener("click", () => {
      for (let i = 0; i < 10; i++) {
         setTimeout(function () {
            resEle.innerHTML += "i = " + i + "<br>";
         }, 2000 * i);
      }
   });
</script>
</body>
</html>

आउटपुट

जावास्क्रिप्ट में लूप में देरी कैसे जोड़ें?

'START' बटन पर क्लिक करने पर, 3प्रत्येक पुनरावृत्ति के बाद विलंब होगा -

जावास्क्रिप्ट में लूप में देरी कैसे जोड़ें?



  1. जावास्क्रिप्ट में डीओएम तत्व में कक्षा कैसे जोड़ें?

    DOM एलिमेंट में क्लास जोड़ने के लिए, आपको सबसे पहले इसे querySelector जैसे querySelector, getElementById, आदि का उपयोग करके ढूंढना होगा। फिर आपको क्लास जोड़ने की आवश्यकता है। उदाहरण के लिए, यदि आपके पास निम्न HTML है - उदाहरण <!DOCTYPE html> <html>    <head></head>

  1. एक जावास्क्रिप्ट कंस्ट्रक्टर के लिए एक संपत्ति, विधि कैसे जोड़ें?

    जावास्क्रिप्ट कंस्ट्रक्टर में प्रॉपर्टी, विधि जोड़ने के लिए निम्नलिखित कोड है - उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <t

  1. जावास्क्रिप्ट में एसिंक्रोनस लूप को कैसे कार्यान्वित करें?

    जावास्क्रिप्ट में एसिंक्रोनस लूप को लागू करने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>