loop - javascript programs




सेटटाइमआउट लूप को कैसे रोकें? (4)

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

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 () का उपयोग करना पड़ा; इसे एक लूप में चलने के लिए और तो अब मेरी समस्या यह है कि जब मैं चाहता हूं [लोड समाप्त] हो तो इस लूप को कैसे रोकें?


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

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

चूंकि इसे 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);
    }
});

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

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();

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

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




settimeout