तैयार करने के लिए अंतराल को कैसे सेट करें, टेक्स्टरेरा फोकस पर रोकें, फिर टेक्स्टरेरा फोकसआउट पर शुरू करें?

Question

मेरे पास एक सोशल स्ट्रीम है जिसे मैं सेट इंटरवल के साथ अपडेट करना चाहता हूं। जब कोई टिप्पणी या उत्तर छोड़ रहा है तो SetInterval को रोका जाना चाहिए अन्यथा यह textarea की सामग्री को साफ़ करता है क्योंकि यह अपडेट की जा रही सामग्री के अंदर घोंसला है।

मैं इस कोड का उपयोग किसी अन्य उत्तर से संशोधित करने का प्रयास कर रहा हूं, लेकिन यह विफल रहा है कि यह सेट अंतराल टाइमर के पहले चक्र के बाद टाइमर को नहीं रोकेगा।

एचटीएमएल ...

<div id="social_stream_content"> 
    <textarea id="comments" rows="4" cols="50" placeholder="Set focus to stop timer"></textarea> 
</div> 

जे एस ...

function auto_load(){ 
       data = '<textarea id="comments" rows="4" cols="50" placeholder="Set focus to stop timer..."></textarea>'; 
     $("#social_stream_content").html(data); 
     alert("auto_load invoked"); 
} 

var myInterval; 
var interval_delay = 10000; 
var is_interval_running = false; //Optional 

$(document).ready(function(){ 
    auto_load(); //Call auto_load() function when document is Ready 

    //Refresh auto_load() function after 10000 milliseconds 
    myInterval = setInterval(interval_function, interval_delay); 

    $('textarea').focus(function() { 
     console.log('focus'); 
     clearInterval(myInterval); // Clearing interval on window blur 
     is_interval_running = false; //Optional 
    }).focusout(function() { 
     console.log('focusout'); 
     clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
     if (!is_interval_running) //Optional 
      myInterval = setInterval(interval_function, interval_delay); 
    }); 
}); 

interval_function = function() { 
    is_interval_running = true; //Optional 
    // Code running while textarea is NOT in focus 
    auto_load(); 
} 

संपादित करें: मैं सब कुछ शामिल करने के लिए के रूप में JSfiddle पर परीक्षण कोड नवीनीकृत किया है। यदि आप दस्तावेज़ तैयार पर अलर्ट बंद करने के तुरंत बाद टिप्पणी टेक्स्टरे पर ध्यान केंद्रित करते हैं तो टाइमर रुक जाएगा।

फोकस हटाने के बाद, और अंतराल टाइमर का पहला चक्र पूरा हो जाता है, टाइमर फिर से नहीं रुक जाएगा। फोकस घटना फायरिंग बंद करना प्रतीत होता है।

क्या ऐसा इसलिए है क्योंकि टिप्पणी टेक्स्टरी को अद्यतन करने वाले सामग्री क्षेत्र के अंदर घोंसला है? मैं अपने बालों को खींच रहा हूँ। अगर मैं घोंसले को हटा देता हूं, तो यह अपेक्षा के अनुसार काम करता है।

मेरी चेतावनी यह है कि टिप्पणी कारणों को हमेशा स्पष्ट कारणों से सामाजिक स्ट्रीम की सामग्री div के अंदर घोंसला जा रहा है।

तो, प्रश्न को आगे अपडेट करने के लिए: क्या अंतराल टाइमर jquery का उपयोग कर textarea फोकस पर रुकने का कोई तरीका है, जबकि केंद्रित तत्व अद्यतन तत्व के अंदर घोंसला है? पहले अंतराल के बाद फोकस इवेंट फायरिंग क्यों बंद कर देता है?

संपादित करें: जेरेमी क्लुकन के समाधान के साथ मूल रूप से काम कर रहे पूर्ण जेएस कोड, किसी भी प्रकार के प्रोजेक्ट को करने के लिए शामिल किया गया है।

श्रमजीवी जे एस:

function auto_load(){ 
    data = '<textarea id="comments" rows="4" cols="50" placeholder="Set focus to stop timer..."></textarea>'; 
    $("#social_stream_content").html(data); 
    alert("auto_load invoked"); 
} 

var myInterval; 
var interval_delay = 10000; 
var is_interval_running = false; //Optional 

$(document).ready(function(){ 
    auto_load(); //Call auto_load() function when document is Ready 

    //Refresh auto_load() function after 10000 milliseconds 
    myInterval = setInterval(interval_function, interval_delay); 

    $('body').on('focus', '#social_stream_content textarea', function (event) { 
     console.log('focus'); 
     clearInterval(myInterval); // Clearing interval on window blur 
     is_interval_running = false; //Optional 
    }).on('focusout', '#social_stream_content textarea', function(event) { 
     console.log('focusout'); 
     clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
     if (!is_interval_running) //Optional 
      myInterval = setInterval(interval_function, interval_delay); 
    }); 
}); 

interval_function = function() { 
    is_interval_running = true; //Optional 
    // Code running while textarea is NOT in focus 
    auto_load(); 
} 

Answer 1

फोकस ईवेंट काम करना बंद कर देता है, क्योंकि जब आपका अंतराल फ़ंक्शन आग लग जाता है, तो यह DIV की सामग्री को प्रतिस्थापित करता है जिसमें TEXTAREA मौजूद नहीं है।

इस बजाय कार्य करें:

$('body').on('focus', '#social_stream_content textarea', function (event) { 
 
    // Focus handler 
 
}).on('focusout', '#social_stream_content textarea', function(event) { 
 
    // Focusout handler 
 
});

यह सब ध्यान और घटनाओं कि चयनकर्ता "#social_stream_content पाठ क्षेत्र" सीधे या तो वस्तु के लिए संलग्न बिना मेल खाते हैं focusout पर कब्जा होगा।

Answer 2

आप ध्यान केंद्रित का पता लगाने और एक textareaaddEventListener (घटनाओं: फोकस और कलंक) का उपयोग कर के लिए धुंधला कर सकते हैं।

आप clearInterval() का उपयोग कर intervalID पर जाकर setInterval() समाप्त कर सकते हैं।

प्रिंसिपल (वेनिला जावास्क्रिप्ट में) दिखाते हुए एक साधारण कामकाजी उदाहरण के नीचे।

मूल रूप से

:

• पृष्ठ लोड टाइमर शुरू होता है।
• जब उपयोगकर्ता textarea टाइमर स्टॉप पर ध्यान केंद्रित करता है।
• जब उपयोगकर्ता textarea टाइमर फिर से शुरू होता है।

प्रलेखन:

WindowTimers.clearInterval()

WindowTimers.setInterval()

तुम भी ब्याज Document.activeElement का मिल सकता है।

window.app = { 
 
    timerRef: null, 
 
    timerStart: function() { 
 
    this.timerRef = setInterval(function() { 
 
     //alert("Hello"); 
 
     console.log('refresh stream'); 
 
    }, 2000); 
 
    }, 
 
    timerStop:function(){ 
 
     clearInterval(this.timerRef); 
 
    }, 
 
    txtAreaListenFocus: function() { 
 
    var txtArea = document.getElementById('txtArea'); 
 
    txtArea.addEventListener('focus', function(event) { 
 
     this.timerStop(); 
 
     console.log('focus'); 
 
    }.bind(this)); 
 
    }, 
 
    txtAreaListenBlur: function() { 
 
    var txtArea = document.getElementById('txtArea'); 
 
    txtArea.addEventListener('blur', function(event) { 
 
     this.timerStart(); 
 
     console.log('blur'); 
 
    }.bind(this)); 
 
    }, 
 
    start: function() { 
 
    this.timerStart(); 
 
    this.txtAreaListenFocus(); 
 
    this.txtAreaListenBlur(); 
 
    } 
 

 
}; 
 

 
window.app.start();

<textarea id="txtArea" rows="4" cols="50"> 
 
    Some content here 
 
</textarea>

---

jQuery के संस्करण नीचे। आप .focusout() और .focusin() उपयोग कर सकते हैं:

$(document).ready(function(){ 
 
window.app = { 
 
    timerRef: null, 
 
    timerStart: function() { 
 
    this.timerRef = setInterval(function() { 
 
     //alert("Hello"); 
 
     console.log('refresh stream'); 
 
    }, 2000); 
 
    }, 
 
    timerStop:function(){ 
 
     clearInterval(this.timerRef); 
 
    }, 
 
    txtAreaListenFocus: function() { 
 
    $('#txtArea').focusin(function(event) { 
 
     this.timerStop(); 
 
     console.log('focus'); 
 
    }.bind(this)); 
 
    }, 
 
    txtAreaListenBlur: function() { 
 
    $('#txtArea').focusout(function(event) { 
 
     this.timerStart(); 
 
     console.log('blur'); 
 
    }.bind(this)); 
 
    }, 
 
    start: function() { 
 
    this.timerStart(); 
 
    this.txtAreaListenFocus(); 
 
    this.txtAreaListenBlur(); 
 
    } 
 

 
}; 
 

 
window.app.start(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="txtArea" rows="4" cols="50"> 
 
    Some content here 
 
</textarea>

---

प्रश्न में विशेष रूप से अपने कोड के बारे में, मैं नीचे काम कर रहे उदाहरण में इसे ठीक कर दिया है।

$(document).ready(function() { 
 
    var myInterval; 
 
    var interval_delay = 1000; 
 
    var is_interval_running = false; //Optional 
 
    var interval_function = function() { 
 
is_interval_running = true; //Optional 
 
console.log('refresh stream'); 
 
// Code running while comment textarea is not in focus 
 
//auto_load(); 
 
    }; 
 

 
    //auto_load(); //Call auto_load() function when DOM is Ready 
 

 
    //Refresh auto_load() function after 1000 milliseconds 
 
    myInterval = setInterval(interval_function, interval_delay); 
 

 
    $('#textarea').focus(function() { 
 
clearInterval(myInterval); // Clearing interval on window blur 
 
is_interval_running = false; //Optional 
 
    }).focusout(function() { 
 
clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
 
if (!is_interval_running) //Optional 
 
    myInterval = setInterval(interval_function, interval_delay); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="textarea" rows="4" cols="50"> 
 
    Some content here 
 
</textarea>

Answer 3

मेरे ठीक: डी

HTML:

<div id="social_stream_content"></div> 

jQuery:

var myInterval; 
var interval_delay = 1000; 
var is_interval_running = false; //Optional 

$(document).ready(function(){ 
    data = '<textarea id="comments" rows="4" cols="50" placeholder="Set focus to stop timer..."></textarea>'; 
    $(data).appendTo("#social_stream_content"); 

    //Refresh auto_load() function after 10000 milliseconds 
    var myInterval = setInterval(interval_function, interval_delay); 

    $('#comments').focus(function() { 
     console.log('focus'); 
     clearInterval(myInterval); // Clearing interval on window blur 
     is_interval_running = false; //Optional 
    }).focusout(function() { 
     console.log('focusout'); 
     clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
     if (!is_interval_running) //Optional 
      myInterval = setInterval(interval_function, interval_delay); 
    }); 
}); 

interval_function = function() { 
    is_interval_running = true; //Optional 
    // Code running while textarea is NOT in focus 
    $("#comments").val(""); 
    console.log("loop"); 
} 

आशा है कि यह मदद करता है।