javascript - सेटटाइमआउट लूप को कैसे रोकें?




css extjs settimeout (6)

मैं एक छवि स्प्राइट के साथ एक लोडिंग सूचक बनाने की कोशिश कर रहा हूं और मैं इस समारोह के साथ आया था

function setBgPosition() {
   var c = 0;
    var numbers = [0, -120, -240, -360, -480, -600, -720];
    function run() {
       Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
        if (c<numbers.length)
        {
            setTimeout(run, 200);
        }else
        {
            setBgPosition();
        }
    }
    setTimeout(run, 200);
}

तो बाहर रखा गया इस तरह दिखता है

http://jsfiddle.net/TTkre/

मुझे setBgPosition () का उपयोग करना पड़ा; इसे एक लूप में चलने के लिए और तो अब मेरी समस्या यह है कि जब मैं चाहता हूं [लोड समाप्त] हो तो इस लूप को कैसे रोकें?


Answers

चूंकि इसे extjs टैग के साथ टैग किया गया है, तो यह extjs विधि को देखने लायक हो सकता है: http://docs.sencha.com/extjs/6.2.0/classic/Ext.Function.html#method-interval

यह setInterval की तरह काम करता है, लेकिन दायरे का भी ख्याल रखता है, और तर्कों को भी पारित करने की अनुमति देता है:

function setBgPosition() {
    var c = 0;
    var numbers = [0, -120, -240, -360, -480, -600, -720];
    function run() {
       Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
        if (c<numbers.length){
            c=0;
        }
    }
    return Ext.Function.interval(run,200);
}

var bgPositionTimer = setBgPosition();

जब आप रुकना चाहते हैं तो आप इसे रोकने के लिए clearInterval का उपयोग कर सकते हैं

clearInterval(bgPositionTimer);

एक उदाहरण का उपयोग केस होगा:

Ext.Ajax.request({
    url: 'example.json',

    success: function(response, opts) {
        clearInterval(bgPositionTimer);
    },

    failure: function(response, opts) {
        console.log('server-side failure with status code ' + response.status);
        clearInterval(bgPositionTimer);
    }
});

समय के साथ हैंडल करने के लिए सबसे आसान तरीका

function myFunc (terminator = false) {
    if(terminator) {
        clearTimeout(timeOutVar);
    } else {
        // do something
        timeOutVar = setTimeout(function(){myFunc();}, 1000);
    }
}   
myFunc(true); //  -> start loop
myFunc(false); //  -> end loop

मुझे यकीन नहीं है, लेकिन हो सकता है कि आप क्या चाहते हैं:

var c = 0;
function setBgPosition()
{
    var numbers = [0, -120, -240, -360, -480, -600, -720];
    function run()
    {
        Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
        if (c<=numbers.length)
        {
            setTimeout(run, 200);
        }
        else
        {
            Ext.get('common-spinner').setStyle('background-position', numbers[0] + 'px 0px');
        }
    }
    setTimeout(run, 200);
}
setBgPosition();

मुझे पता है कि यह एक पुराना सवाल है, मैं वैसे भी अपना दृष्टिकोण पोस्ट करना चाहता हूं। इस तरह आपको टीजे क्रॉडर का विस्तार करने वाली 0 चाल को संभालना नहीं है।

var keepGoing = true;

function myLoop() {
    // ... Do something ...

    if(keepGoing) {
        setTimeout(myLoop, 1000);
    }
}

function startLoop() {
    keepGoing = true;
    myLoop();
}

function stopLoop() {
    keepGoing = false;
}

आपको "दान" ट्रैक करने के लिए एक चर का उपयोग करने की आवश्यकता है और फिर लूप के प्रत्येक पुनरावृत्ति पर इसका परीक्षण करें। यदि किया गया == सत्य तो वापस आओ।

var done = false;

function setBgPosition() {
    if ( done ) return;
    var c = 0;
    var numbers = [0, -120, -240, -360, -480, -600, -720];
    function run() {
        if ( done ) return;
        Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
        if (c<numbers.length)
        {
            setTimeout(run, 200);
        }else
        {
            setBgPosition();
        }
    }
    setTimeout(run, 200);
}

setBgPosition(); // start the loop

setTimeout( function(){ done = true; }, 5000 ); // external event to stop loop

यह जांचने के लिए कि क्या यह दिखाई नहीं दे रहा है ! :

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

या निम्नलिखित सैम भी है, जब आप इसे कई बार चाहते हैं तो बेहतर प्रदर्शन करने के लिए एक चर में jQuery चयनकर्ता को सहेजना:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}




javascript css extjs settimeout