2011-11-19 13 views
15

मैं अपने सिर को setTimeout के आसपास लपेटने की कोशिश कर रहा हूं, लेकिन मैं इसे ठीक से काम नहीं कर सकता।सेटटाइमआउट देरी काम नहीं कर रहा

मैं यहाँ एक उदाहरण स्थापित किया है: http://jsfiddle.net/timkl/Fca2n/

मैं के बाद एक लंगर क्लिक किया जाता है एक पाठ काउंटडाउन करना चाहते हैं - लेकिन मेरे setTimeout भले ही मैं 1 के लिए देरी निर्धारित किया है, एक ही समय पर सक्रिय होने लगती है सेकंड।

यह मेरी HTML है:

<a href="#">Click me!</a> 

<span id="target"></span> 

यह मेरी जे एस है:

$(document).ready(function() { 


function foo(){ 

    writeNumber = $("#target"); 

    setTimeout(writeNumber.html("1"),1000); 
    setTimeout(writeNumber.html("2"),1000); 
    setTimeout(writeNumber.html("3"),1000); 
    }; 

$('a').click(function() { 
foo(); 
}); 

}); 

पर कोई संकेत है कि मैं क्या गलत कर किया जा सकता है अत्यधिक सराहना की :)

उत्तर

37

setTimeout पर एक अद्यतन फ़िल्ड देखें एक तर्क के रूप में कार्य करता है। आप फ़ंक्शन निष्पादित कर रहे हैं और परिणाम को setTimeout में पास कर रहे हैं (इसलिए फ़ंक्शन को तुरंत निष्पादित किया जाता है)। उदाहरण के लिए आप गुमनाम काम करता है, का उपयोग कर सकते हैं:

setTimeout(function() { 
    writeNumber.html("1"); 
}, 1000); 

नोट है कि एक ही setInterval का सच है।

+0

Thx पारित हो जाएगा कर सकते हैं! :) मैंने अपना जेएसफ़िल्ड अपडेट किया है: http://jsfiddle.net/timkl/cRDQh/ मुझे अभी भी वही परिणाम मिलता है, सेटटाइमआउट एक ही समय में आग लगती है। – timkl

+1

कोई समस्या नहीं :) यदि आप उन्हें एक ही समय में आग नहीं करना चाहते हैं, तो टाइमआउट लंबाई बदलें। उदाहरण के लिए, पहली बारआउट के लिए 1000ms, दूसरे के लिए 2000ms और इसी तरह। –

+0

यह न केवल 'सेटटाइमआउट' और 'सेट इंटरवल' के लिए सही है, लेकिन प्रत्येक मामले के लिए आपको कॉलम को पैरामीटर में से एक के रूप में पास करना होगा। – Tadeck

2

आप उपयोग करने की आवश्यकता एक कार्य संदर्भ बाद में टाइमर समाप्त होने पर लागू किया जाएगा। प्रत्येक कथन को एक अज्ञात फ़ंक्शन में लपेटें ताकि इसे तुरंत निष्पादित नहीं किया जा सके, बल्कि जब टाइमर समाप्त हो जाए।

setTimeout(function() { writeNumber.html("1"); },1000); 

इसके अलावा, आप प्रत्येक के लिए एक अलग विलंब मूल्य का उपयोग करना चाहते हैं ताकि टाइमर एक ही समय में समाप्त न हो जाएं। http://jsfiddle.net/RqCqM/

1

बस setInterval() का उपयोग करें। Here जो मैं आया था। यहां आपके नए जावास्क्रिप्ट है:

function foo(){ 
    writeNumber = $("#target"); 
    number  = 0; 
    writeNumber.html(number); 
    setInterval(function(){ 
     number = number+1; 
     writeNumber.html(number); 
    },1000); 
    }; 
$('a').click(function() { 
foo(); 
}); 
5

आप गुमनाम कार्यों में अपना बयान रैप करने के लिए और भी अपने समय लड़खड़ाते की जरूरत है - आप चरण होगा काफी रन एक साथ 1000 के लिए सब कुछ सेट setTimeout के रूप में तो

setTimeout(function(){writeNumber.html("1")},1000); 
setTimeout(function(){writeNumber.html("2")},2000); 
setTimeout(function(){writeNumber.html("3")},3000); 

setTimeout फ़ंक्शन समाप्त होने के बाद पिछले कॉल के बाद फ़ंक्शन को कॉल करने के बाद फ़ंक्शन 1 सेकंड को कार्य करेगा।

डेमो - http://jsfiddle.net/JSe3H/1/

+0

+1 अच्छा बिंदु - आपने न केवल कॉलबैक पास किया गया है, बल्कि यह निष्पादित होने पर भी इंगित किया है। – Tadeck

1

आप मुन्ना जरूरत है एक कार्यों के बाद समय समाप्त पारित हो जाता है के नाम से जाना का उपयोग करें; आप अज्ञात फ़ंक्शन का भी उपयोग कर सकते हैं, तो आपका फ़ंक्शन foo इस तरह दिखेगा:

function foo(){ 

writeNumber = $("#target"); 

setTimeout(function() { writeNumber.html("1"); },1000); 
setTimeout(function() { writeNumber.html("2"); },1000); 
setTimeout(function() { writeNumber.html("3"); },1000); 

}; 
0

मैं इस प्रश्न पर उतर गया। इसका उत्तर पर्याप्त रूप से दिया गया है, और मुझे लगता है कि setInterval का उपयोग @Purag के रूप में सुझाव दिया गया है कि वांछित कार्यात्मक व्यवहार प्राप्त करने का शायद सबसे अच्छा तरीका है। हालांकि प्रारंभिक कोड उदाहरण ने जावास्क्रिप्ट के असिंक्रोनस व्यवहार को ध्यान में नहीं रखा। यह अक्सर एक त्रुटि होती है, जिसे मैंने खुद को अवसर से अधिक बना दिया है :)।

तो एक तरफ ध्यान दें के रूप में मैं इस जो प्रारंभिक प्रयास की नकल करता लिए एक और संभव समाधान देना चाहता था, लेकिन इस बार जावास्क्रिप्ट का Asynchronousity पर विचार करता है:

setTimeout(function() { 
    writeNumber.html("1"); 
    setTimeout(function() { 
     writeNumber.html("1"); 
     setTimeout(function() { 
      writeNumber.html("1"); 
     }, 1000); 
    }, 1000); 
}, 1000); 

अब बिल्कुल यह स्पष्ट रूप से भयानक कोड है!

मैंने my own SO question में इसका एक कार्यरत JSFiddle दिया है। यह कोड डूम के तथाकथित पिरामिड का उदाहरण है। और जावास्क्रिप्ट वादे का उपयोग करके इसे कम किया जा सकता है, जैसा कि मेरे प्रश्न के उत्तर में दिखाया गया है। यह कुछ काम लेता वादे का उपयोग करता है WriteNumber() का एक संस्करण लिखने के लिए है, लेकिन फिर कोड somehting की तरह फिर से लिखा जा सकता है:

2

वहाँ कार्य करने के लिए तर्क पारित करने के लिए एक प्रावधान है। आपके मामले में, आप इसे

setTimeout(writeNumber.html,1000,1); 
setTimeout(writeNumber.html,1000,2); 
setTimeout(writeNumber.html,1000,3); 

setTimeout सुविधा के लिए तीसरा तर्क करके कर writeNumber.html कार्य करने के लिए मुझे बाहर की मदद करने के लिए

संबंधित मुद्दे