मैं एक स्लाइडर को कोड करने की कोशिश कर रहा हूं जो एक बटन पर क्लिक करने पर एक छवि में फीका होना चाहिए।

function showelementOnclick(selectorToID, firstShowingElenment, milliseconds) {
  var childElements = $(selectorToID).children();
  var a = childElements.find("button");


  for (var i = 0; i < a.length; i += 2) {
    a.eq(i).click(function() {
      childElements.eq(firstShowingElenment).css("display", "none");
      firstShowingElenment--;

      console.log("first : " + firstShowingElenment)

      if (firstShowingElenment == -1) {
        firstShowingElenment = 2;
      }
      childElements.eq(firstShowingElenment).fadeIn(1000)
      console.log("Bin ich hier?")

      setTimeout(function() {
        console.log("hi")
      }, 5000)

    })
  }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
  <div class="slide first">
    <img src="Bilder/Download.jpg" alt="" />-->
    <button>Rückwärts 1</button>
    <button>Vorwärts 1</button>
  </div>

  <div class="slide second">
    <img src="Bilder/image.jpg" alt="" />-->
    <button>Rückwärts 2</button>
    <button>Vorwärts 2</button>
  </div>

  <div class="slide third">
    <img src="Bilder/Download.jpg" alt="" />-->
    <button>Rückwärts 3</button>
    <button>Vorwärts 3</button>
  </div>
</div>

यह मेरा कोड है, कार्यक्षमता में फीका काम करता है, लेकिन setTimeout ठीक से काम नहीं करता है। मेरा लक्ष्य यह है कि, यदि कोई उपयोगकर्ता उस बटन पर क्लिक करता है जो एक छवि प्रदर्शित करना चाहिए और यदि वह दो बार क्लिक करना चाहता है तो उसे 5 सेकंड प्रतीक्षा करनी होगी। मेरी खराब इंग्लिश के लिए माफ़ कीजिये।

0
PassionatedProgrammer 22 मार्च 2020, 18:17
"ठीक से काम नहीं करता" का अर्थ है? क्या हो रहा है?
 – 
ArSeN
22 मार्च 2020, 18:34
यह 5 सेकंड इंतजार नहीं करता
 – 
PassionatedProgrammer
22 मार्च 2020, 18:35
यह कब तक प्रतीक्षा करता है?
 – 
ArSeN
22 मार्च 2020, 18:35
क्या आप एचटीएमएल भी पोस्ट कर सकते हैं ताकि हम एक कार्यात्मक उदाहरण देख सकें?
 – 
Tom O.
22 मार्च 2020, 18:36
1
क्या यह जानबूझकर है कि क्लिक श्रोता केवल हर दूसरे तत्व के लिए पंजीकृत है? i+=2
 – 
ArSeN
22 मार्च 2020, 18:37

2 जवाब

मैंने आपके द्वारा प्रदान की गई जावास्क्रिप्ट को एक वैकल्पिक समाधान के साथ बदल दिया है जो मुझे लगता है कि आपके द्वारा वर्णित कार्यक्षमता के लिए काम करना चाहिए।

आप setTimeout को में लपेट सकते हैं Promise कंस्ट्रक्टर और await पूरा हो रहा है। setTimeout को कॉल करने से पहले बस बटन को अक्षम कर दें और समय समाप्त होने के बाद इसे फिर से सक्षम करें।

ईवेंट डेलिगेशन का उपयोग करना, प्रत्येक button पर लूप करने के बजाय ईवेंट प्रबंधन को संभालने का एक आसान तरीका है तत्व। मूल विचार यह है कि DOM पदानुक्रम में मूल तत्व पर एक एकल ईवेंट श्रोता रखा जाए और फिर ईवेंट होने पर हैंडलर को दिए गए event तर्क का निरीक्षण करें। यह कोड को साफ रखता है कि पृष्ठ पर प्रत्येक button के लिए एक अद्वितीय हैंडलर सेटअप हो। नीचे एक उदाहरण है:

const sliderEl = document.querySelector('#slider');
const TIMEOUT_DURATION = 5000;

sliderEl.addEventListener('click', async event => {
  if (event.target.tagName === 'BUTTON') {
    event.target.disabled = true;

    await new Promise((resolve, reject) => {
      setTimeout(resolve, TIMEOUT_DURATION);
    });

    event.target.disabled = false;
  }
});
<div id="slider">
  <div class="slide first">
    <img src="Bilder/Download.jpg" alt="" />-->
    <button>Rückwärts 1</button>
    <button>Vorwärts 1</button>
  </div>

  <div class="slide second">
    <img src="Bilder/image.jpg" alt="" />-->
    <button>Rückwärts 2</button>
    <button>Vorwärts 2</button>
  </div>

  <div class="slide third">
    <img src="Bilder/Download.jpg" alt="" />-->
    <button>Rückwärts 3</button>
    <button>Vorwärts 3</button>
  </div>
</div>

यदि यह वह नहीं है जिसे आप प्राप्त करने का प्रयास कर रहे हैं, तो मैं प्रश्न को फिर से पढ़ सकता हूं और अपना उत्तर संशोधित कर सकता हूं।

1
Tom O. 22 मार्च 2020, 19:54

यह पॉलीफ़िल का उपयोग किए बिना IE पर काम करना चाहिए:

const sliderEl = document.querySelector('#slider');
const TIMEOUT_DURATION = 5000;

sliderEl.addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    event.target.disabled = true;

    setTimeout(function() {
        event.target.disabled = false;
    }, TIMEOUT_DURATION);
  }
});
<div id="slider">
  <div class="slide first">
    <img src="Bilder/Download.jpg" alt="" />-->
    <button>Rückwärts 1</button>
    <button>Vorwärts 1</button>
  </div>

  <div class="slide second">
    <img src="Bilder/image.jpg" alt="" />-->
    <button>Rückwärts 2</button>
    <button>Vorwärts 2</button>
  </div>

  <div class="slide third">
    <img src="Bilder/Download.jpg" alt="" />-->
    <button>Rückwärts 3</button>
    <button>Vorwärts 3</button>
  </div>
</div>
1
jeprubio 7 अप्रैल 2020, 19:35