जावास्क्रिप्ट का उपयोग करके विशिष्ट देरी के बाद स्क्रिप्ट निष्पादित करें


189

क्या jQuery के समान कोई जावास्क्रिप्ट विधि है delay()या wait()(किसी विशिष्ट राशि के लिए स्क्रिप्ट के निष्पादन में देरी करने के लिए)?

जवाबों:


189

निम्नलिखित है:

setTimeout(function, milliseconds);

फ़ंक्शन जिसे समय बीत सकता है जिसके बाद फ़ंक्शन निष्पादित किया जाएगा।

देखें: खिड़की setTimeout()विधि


3
यह एक अभिव्यक्ति नहीं है जिसे निष्पादित किया जाता है यह एक फ़ंक्शन है। @ मार्सियस का जवाब दिखाता है कि।
पीडोफुरला

117
यह देरी नहीं है, यह एक कांटा है। देरी एक ही धागे में काम करना चाहिए।
ड्रैगनलॉर्ड

13
यह तुरंत function_reference निष्पादित करेगा। "काम" करने के लिए (एसिंक्रोनस रूप से) इसे इस रूप में कहा जाना चाहिए: सेटटाइमआउट (फ़ंक्शन () {मेथडटॉल ();}; 1000);
बर्नौली आईटी

6
मैं यह बताना चाहता हूं कि हम जावास्क्रिप्ट के बारे में बात कर रहे हैं; "थ्रेड्स" लाना या यह कि यह "सिंक्रोनस" काम करना चाहिए तकनीकी रूप से और शब्दार्थ रूप से सही हो सकता है लेकिन वास्तव में जावास्क्रिप्ट के संदर्भ में फिट नहीं है, वास्तव में उन तरीकों में से किसी के साथ देरी प्राप्त करने का कोई तरीका नहीं है (आप डॉन ' टी जेएस में "धागे" बनाएं जैसे आप अन्य भाषाओं में करते हैं)। इसके अलावा, function_referenceजब तक आप शामिल नहीं करेंगे, यह तुरंत निष्पादित नहीं होगा ()। Ie function_referenceसिर्फ इतना है कि - एक संदर्भ; पासिंग function_reference()समारोह को तुरंत लागू करेगा।
डैनी बुलिस

237

बाकी सभी के बारे में जो कुछ भी कहा गया है उसे जोड़ने के लिए setTimeout: यदि आप भविष्य में किसी पैरामीटर के साथ किसी फ़ंक्शन को कॉल करना चाहते हैं, तो आपको कुछ अनाम फ़ंक्शन कॉल सेट करने की आवश्यकता है।

आपको फ़ंक्शन को बाद में बुलाया जाने के लिए एक तर्क के रूप में पारित करने की आवश्यकता है। वास्तव में यह नाम के पीछे कोष्ठक के बिना इसका मतलब है। निम्नलिखित अलर्ट को एक बार में कॉल करेगा, और यह 'हैलो वर्ल्ड' प्रदर्शित करेगा:

var a = "world";
setTimeout(alert("Hello " + a), 2000);

इसे ठीक करने के लिए आप या तो एक फ़ंक्शन का नाम रख सकते हैं (जैसा कि Flubba ने किया है) या आप एक अनाम फ़ंक्शन का उपयोग कर सकते हैं। यदि आपको एक पैरामीटर पास करने की आवश्यकता है, तो आपको एक अनाम फ़ंक्शन का उपयोग करना होगा।

var a = "world";
setTimeout(function(){alert("Hello " + a)}, 2000);
a = "Stack Overflow";

लेकिन अगर आप उस कोड को चलाते हैं तो आप देखेंगे कि 2 सेकंड के बाद पॉपअप 'हैलो स्टैक ओवरफ्लो' कहेगा। ऐसा इसलिए है क्योंकि चर का मान उन दो सेकंड में बदल गया है। दो मिनट के बाद इसे 'हैलो वर्ल्ड' कहने के लिए, आपको निम्नलिखित कोड स्निपेट का उपयोग करना होगा:

function callback(a){
    return function(){
        alert("Hello " + a);
    }
}
var a = "world";
setTimeout(callback(a), 2000);
a = "Stack Overflow";

यह 2 सेकंड प्रतीक्षा करेगा और फिर 'हैलो वर्ल्ड' पॉपअप करेगा।


37

बस थोड़ा विस्तार करने के लिए ... आप setTimeoutकॉल में सीधे कोड निष्पादित कर सकते हैं , लेकिन जैसा कि @patrick कहते हैं, आप सामान्य रूप से कॉलबैक फ़ंक्शन असाइन करते हैं, जैसे। समय मिलीसेकंड है

setTimeout(func, 4000);
function func() {
    alert('Do stuff here');
}

27

यदि आप वास्तव में एक अवरुद्ध (समकालिक) delayकार्य करना चाहते हैं (जो भी हो), तो ऐसा कुछ क्यों न करें:

<script type="text/javascript">
    function delay(ms) {
        var cur_d = new Date();
        var cur_ticks = cur_d.getTime();
        var ms_passed = 0;
        while(ms_passed < ms) {
            var d = new Date();  // Possible memory leak?
            var ticks = d.getTime();
            ms_passed = ticks - cur_ticks;
            // d = null;  // Prevent memory leak?
        }
    }

    alert("2 sec delay")
    delay(2000);
    alert("done ... 500 ms delay")
    delay(500);
    alert("done");
</script>

2
इस समाधान के साथ कठिनाई यह है कि यह सक्रिय रूप से एक प्रोसेसर का उपयोग करता है, जिससे बिजली के उपयोग में वृद्धि होती है और अन्य थ्रेड्स / प्रक्रियाओं (जैसे अन्य टैब, अन्य प्रोग्राम) के लिए उपलब्ध संसाधनों में कमी होती है। नींद, इसके विपरीत, अस्थायी रूप से सिस्टम संसाधनों के एक धागे के उपयोग को निलंबित करता है।
ramcdougal

1
नई तारीख के बजाय Date.now () का उपयोग करना बेहतर है और मेमोरी लीक के बारे में न सोचें
WayFarer

1
बेशक यह CPU गहन है, लेकिन त्वरित और गंदे परीक्षण के लिए यह काम करता है
Maris B.

मुझे इसका एक संस्करण चाहिए जो धागे को लॉक नहीं करता है, इसलिए मैं delayआईएनजी को आईएनजी से पहले ताज़ा कर सकता हूं ( इस प्रश्न का उत्तर देने के लिए )। क्या ऐसा करने का कोई तरीका है?
गुई इमामुरा

3
एक अधिक कॉम्पैक्ट दिनचर्या: फ़ंक्शन देरी (एमएस) {var start_time = Date.now (); जबकि (Date.now () - start_time <ms); }
ड्यूक

15

आपको सेटटाइमआउट का उपयोग करने और इसे कॉलबैक फ़ंक्शन पास करने की आवश्यकता है । आप जावास्क्रिप्ट में नींद का उपयोग नहीं कर सकते इसका कारण यह है कि आप इस बीच कुछ भी करने से पूरे पृष्ठ को अवरुद्ध कर देंगे। अच्छी योजना नहीं। जावास्क्रिप्ट इवेंट मॉडल का उपयोग करें और खुश रहें। यह लड़ाई मत करो!


2
फिर भी यह परीक्षण के उद्देश्यों के लिए उपयोगी होगा। जैसे नया HTTP अनुरोध करने से पहले पृष्ठ परिवर्तनों का मूल्यांकन करने के लिए कुछ सेकंड के लिए फ़ॉर्म सबमिट करने में देरी करना।
१३:१५

1
@rushinge ने फॉर्म सबमिट करने के लिए कॉलबैक सेट किया और डिफ़ॉल्ट फॉर्म सबमिट को निष्क्रिय कर दिया
पॉपुलस

1
किसी लिंक को कोड के रूप में छोड़ने के लिए बुरा विचार ... क्योंकि अब यह काम नहीं करता है।
एम्मेट ने

1
या आप जानते हैं, मैं इसे ठीक कर सकता था।
पैट्रिक

14

आप नियमित अंतराल पर कुछ कोड को बार-बार चलाने के लिए window.setInterval () का भी उपयोग कर सकते हैं ।


2
सेटइंटरवल () का उपयोग नहीं किया जाना चाहिए इसके बजाय सेटटाइमआउट का उपयोग करना चाहिए
पॉल

9
setTimeout()एक बार करता है, एक बार setInterval()करता है। यदि आप चाहते हैं कि आपका कोड हर 5 सेकंड में चले, तो setInterval()यह काम के लिए बनाया गया है।
rcoup

11

पहले की टिप्पणियों को जोड़ने के लिए, मैं निम्नलिखित कहना चाहूंगा:

setTimeout()जावास्क्रिप्ट में समारोह असल स्क्रिप्ट के कार्य निष्पादन रुकता नहीं है, लेकिन केवल संकलक भविष्य में कोड कुछ समय निष्पादित करने के लिए कहता है।

ऐसा कोई फ़ंक्शन नहीं है जो वास्तव में जावास्क्रिप्ट में निर्मित निष्पादन को रोक सकता है। हालांकि, आप अपने स्वयं के फ़ंक्शन को लिख सकते हैं जो Date()फ़ंक्शन का उपयोग करके और आपकी आवश्यकता के समय अंतराल को जोड़ने तक बिना शर्त लूप की तरह कुछ करता है ।


11

यदि आपको केवल देरी का परीक्षण करने की आवश्यकता है, तो आप इसका उपयोग कर सकते हैं:

function delay(ms) {
   ms += new Date().getTime();
   while (new Date() < ms){}
}

और फिर यदि आप 2 सेकंड के लिए देरी करना चाहते हैं

delay(2000);

हालांकि उत्पादन के लिए सबसे अच्छा नहीं हो सकता है। टिप्पणियों में उस पर और अधिक


@ U2744 SNOWFLAKE क्या आप कोशिश कर सकते हैं और अपनी टिप्पणी में थोड़ा और सटीक हो सकते हैं
क्रिस्टोफर

1
खैर, यह एक व्यस्त लूप है जो लैपटॉप और अन्य मोबाइल उपकरणों की बैटरी को खत्म कर देगा, और शायद यूआई को प्रतिक्रिया देने (या यहां तक ​​कि प्रदर्शित करने) से भी रोकता है।
Ry-

@ U2744SNOWFLAKE समझ में आता है। क्या मैंने इस फ़ंक्शन का उपयोग किया है, इसका उत्तर अपडेट किया है :)
Christoffer

2
एक त्वरित और गंदे (और अस्थायी) समाधान के लिए विकास में पर्याप्त रूप से काम करता है।
ह्यूमनइन्दिसुइगिस

5

आप एक वादे के पीछे कोड क्यों नहीं डाल सकते हैं? (मेरे सिर के ऊपर से टाइप किया हुआ)

new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000);
}).then(function() {
  console.log('do whatever you wanted to hold off on');
});


5

सरल उत्तर है:

setTimeout(
    function () {
        x = 1;
    }, 1000);

उपरोक्त कार्य 1 सेकंड (1000 एमएस) की प्रतीक्षा करता है, फिर x को 1. पर सेट करता है। जाहिर है यह एक उदाहरण है; आप अनाम फ़ंक्शन के अंदर कुछ भी कर सकते हैं।


4

मुझे वास्तव में कॉल करने के लिए तीन अलग-अलग तरीकों के साथ मौरियस का स्पष्टीकरण (सबसे अधिक उत्कीर्ण प्रतिक्रिया) पसंद आया setTimeout

अपने कोड में मैं AJAX बचाने की घटना के पूरा होने पर स्वचालित रूप से पिछले पृष्ठ पर ऑटो-नेविगेट करना चाहता हूं। सेव इवेंट के पूरा होने के सीएसएस में एक मामूली एनीमेशन है जो यह दर्शाता है कि सेव सफल था।

मेरे कोड में मुझे पहले दो उदाहरणों के बीच एक अंतर मिला:

setTimeout(window.history.back(), 3000);

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

हालाँकि, इसे बदलकर:

setTimeout(function() {window.history.back()}, 3000);

यह वही है जो मैं उम्मीद कर रहा था।

यह बैक () ऑपरेशन के लिए विशिष्ट नहीं है, ऐसा ही होता है alert()। मूल रूप alert()से पहले मामले में उपयोग के साथ , देरी समय की अनदेखी की जाती है। जब मैं पॉपअप को खारिज करता हूं तो CSS के लिए एनीमेशन जारी रहता है।

इस प्रकार, मैं दूसरी या तीसरी विधि का वर्णन करूंगा, भले ही आप कार्यों में निर्मित और तर्कों का उपयोग न कर रहे हों।


1

मेरे पास कुछ अजाक्स कमांड थे जिन्हें मैं बीच में देरी के साथ चलाना चाहता था। ऐसा करने का एक सरल उदाहरण यहां दिया गया है। मैं अपने अपरंपरागत दृष्टिकोण के लिए श्रेडों को चीरने के लिए तैयार हूं। :)

//  Show current seconds and milliseconds
//  (I know there are other ways, I was aiming for minimal code
//  and fixed width.)
function secs()
{
    var s = Date.now() + ""; s = s.substr(s.length - 5);
  return s.substr(0, 2) + "." + s.substr(2);
}

//  Log we're loading
console.log("Loading: " + secs());

//  Create a list of commands to execute
var cmds = 
[
    function() { console.log("A: " + secs()); },
    function() { console.log("B: " + secs()); },
    function() { console.log("C: " + secs()); },
    function() { console.log("D: " + secs()); },
    function() { console.log("E: " + secs()); },
  function() { console.log("done: " + secs()); }
];

//  Run each command with a second delay in between
var ms = 1000;
cmds.forEach(function(cmd, i)
{
    setTimeout(cmd, ms * i);
});

// Log we've loaded (probably logged before first command)
console.log("Loaded: " + secs());

आप कोड ब्लॉक को कॉपी करके कंसोल विंडो में पेस्ट कर सकते हैं और कुछ इस तरह देख सकते हैं:

Loading: 03.077
Loaded: 03.078
A: 03.079
B: 04.075
C: 05.075
D: 06.075
E: 07.076
done: 08.076

1

विलंब के साथ अपने फ़ंक्शन को कॉल करने का सबसे सरल समाधान है:

function executeWithDelay(anotherFunction) {
    setTimeout(anotherFunction, delayInMilliseconds);
}

0

देरी समारोह:

/**
 * delay or pause for some time
 * @param {number} t - time (ms)
 * @return {Promise<*>}
 */
const delay = async t => new Promise(resolve => setTimeout(resolve, t));

asyncसमारोह के अंदर उपयोग :

await delay(1000);

-1

जैसा कि अन्य ने कहा, सेटटाइमआउट आपकी सबसे सुरक्षित शर्त है
लेकिन कभी-कभी आप किसी नए फ़ंक्शन के तर्क को अलग नहीं कर सकते हैं तो आप मिलीसेकंड प्राप्त करने के लिए Date.now () का उपयोग कर सकते हैं और स्वयं विलंब कर सकते हैं ...।

function delay(milisecondDelay) {
   milisecondDelay += Date.now();
   while(Date.now() < milisecondDelay){}
}

alert('Ill be back in 5 sec after you click OK....');
delay(5000);
alert('# Im back # date:' +new Date());

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.