2011-02-13 24 views
8

मैं 2 बटन, 'STAY' और 'Leave' के साथ एक पृष्ठ बनाना चाहता हूं। बटन के नीचे एक आईफ्रेम है। जब पृष्ठ पहली बार लोड होता है, तो iFrame 10 सेकंड के बाद स्वचालित रूप से रीफ्रेश करना प्रारंभ होता है। जब उपयोगकर्ता STAY बटन हिट करता है, तो यह ताज़ा करना बंद कर देगा। इसके बाद यदि वह लाइव बटन हिट करता है तो iFrame फिर से 10 सेकेंड के बाद रीफ्रेश करना शुरू कर देगा।jQuery - स्पष्ट अंतराल के साथ इसे मारने के बाद सेट अंतराल को कैसे पुनरारंभ करें?

$(document).ready(function() { 
    var refreshIntervalId = setInterval("update()", 10000); 

    $('#leave').click(function() { 
     var refreshIntervalId = setInterval("update()", 10000);; 
    }) 

    $('#stay').click(function() { 
     clearInterval(refreshIntervalId); 
    }) 
}); 

function update(){ 
    var url = "load.php"; 
    $('iframe#ifrm').attr('src', url); 
} 

<div id="bar"> 
    <div class= "button" id="stay"> 
    <a>Stay</a> 
    </div> 
    <div class= "button" id="leave"> 
    <a>Leave</a> 
    </div> 
</div> 

लेकिन यह काम नहीं करता, मैं गलत तरीके से clearInterval उपयोग कर रहा हूँ: मैं इस कोड का उपयोग कर रहा हूँ?

उत्तर

11

मुझे लगता है कि आपको फ़ंक्शन स्कोप के बाहर सेट अंतराल आईडी खींचने की आवश्यकता है।

var refreshIntervalId; 
$('#leave').click(function() { 
     refreshIntervalId = setInterval(update, 10000); 
     }) 
$('#stay').click(function() { 
      clearInterval(refreshIntervalId); 
     }) 
}); 

हो सकता है कि कुछ सत्यापन refreshIntervalId चर भी की जाँच कर ...

if(refreshIntervalId!=null){ 
    // Do something with the interval id 
} 
+0

क्या स्पष्ट अंतराल वास्तव में करता है? –

+0

यह अंतराल टाइमर बंद करता है। 'SetInterval' एक अंतराल टाइमर शुरू करता है जो हर 10 सेकंड में 'अपडेट' फ़ंक्शन को कॉल करता है। 'ClearInterval' कॉल उस टाइमर को रोकता है। – rcravens

+0

इसलिए यदि हम 4 सेकंड पर clearInterval को कॉल करते हैं, तो क्या उन 6 सेकेंड का उपयोग अगली बार सेट इंटरवल फ़ंक्शन को फिर से कहा जाएगा? –

1

सबसे पहले आप #leave क्लिक समारोह में एक चर को परिभाषित नहीं कर सकते हैं और #stay क्लिक समारोह में इसका इस्तेमाल करते हैं।

इस तरह यह प्रयोग करें:

var refreshIntervalId = null; 

$('#leave').click(function() { 
    refreshIntervalId = setInterval("update()", 10000); 
}) 
$('#stay').click(function() { 
    clearInterval(refreshIntervalId); 
}) 
+2

उसने इसे बाहर परिभाषित किया, बस ईवेंट हैंडलर के अंदर 'var' का उपयोग न करें। – JCOC611

1

यह एक गुंजाइश मुद्दा है। इसका मतलब यह है कि जहां भी आप "var" डालते हैं, यह परिभाषित करता है कि किस फ़ंक्शन को चर के लिए उपयोग किया गया है। यदि आप ट्रिकर के उदाहरण जैसे सभी कार्यों के बाहर चर को परिभाषित करते हैं, तो आपके दस्तावेज़ में किसी भी फ़ंक्शन के पास उस मान तक पहुंच है।

Tricker के उदाहरण पहले से तैनात:

var refreshIntervalId = null; 

$('#leave').click(function() { 
    refreshIntervalId = setInterval("update()", 10000); 
}) 
$('#stay').click(function() { 
    clearInterval(refreshIntervalId); 
}) 

कभी कभी पूरे दस्तावेज़ चर का उपयोग करने की जरूरत नहीं है, तो आप एक समारोह के अंदर रखना चाहते हैं।

+1

क्या @Yoram de Langen के समान उत्तर जोड़ने का बिंदु क्या है? –

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