setTimeout / ClearTimeout समस्याएं

Question

मैं उदाहरण के बाद स्टार्टपेज पर जाने के लिए एक पेज बनाने की कोशिश करता हूं। निष्क्रियता के 10sec (उपयोगकर्ता कहीं भी क्लिक नहीं कर रहा है)। मैं बाकी के लिए jQuery का उपयोग करता हूं लेकिन मेरे परीक्षण फ़ंक्शन में सेट / स्पष्ट शुद्ध जावास्क्रिप्ट हैं।

अपनी निराशा में मैं इस समारोह में कुछ इस तरह से समाप्त हुआ कि मुझे आशा थी कि मैं पृष्ठ पर किसी भी क्लिक पर कॉल कर सकता हूं। टाइमर ठीक शुरू होता है, लेकिन एक क्लिक पर रीसेट नहीं होता है। यदि फ़ंक्शन को पहले 10 सेकंड के भीतर 5 बार कॉल किया जाता है, तो 5 अलर्टों का मूल्यांकन होगा ... कोई क्लियरटाइमआउट नहीं ...

function endAndStartTimer() {
    window.clearTimeout(timer);
    var timer;
    //var millisecBeforeRedirect = 10000; 
    timer = window.setTimeout(function(){alert('Hello!');},10000); 
}

किसी को भी कोड की कुछ पंक्तियां मिलीं जो चाल चलेगी? - किसी भी क्लिक स्टॉप पर, रीसेट करें और टाइमर शुरू करें। - जब टाइमर जैसे हिट। 10sec कुछ करते हैं।

Answer 1

आपको फ़ंक्शन के timer बाहर घोषित करने की आवश्यकता है । अन्यथा, आपको प्रत्येक फ़ंक्शन इनवोकेशन पर एक नया चर मिलेगा।

var timer;
function endAndStartTimer() {
  window.clearTimeout(timer);
  //var millisecBeforeRedirect = 10000; 
  timer = window.setTimeout(function(){alert('Hello!');},10000); 
}

Comments

प्लस 1 एक क्योंकि यह आवश्यक है, इस मामले में, चर को साफ करने के लिए जो समय से पहले हुड को समय से पहले बाहर निकालता है, इसलिए, इसे दो बार लागू करने से बचना

— डिएगो फेवरो

Answer 2

समस्या यह है कि timerचर स्थानीय है, और प्रत्येक फ़ंक्शन कॉल के बाद इसका मान खो जाता है।

आपको इसे जारी रखने की आवश्यकता है, आप इसे फ़ंक्शन के बाहर रख सकते हैं, या यदि आप वैरिएबल को वैश्विक के रूप में उजागर नहीं करना चाहते हैं, तो आप इसे एक क्लोजर में स्टोर कर सकते हैं , जैसे:

var endAndStartTimer = (function () {
  var timer; // variable persisted here
  return function () {
    window.clearTimeout(timer);
    //var millisecBeforeRedirect = 10000; 
    timer = window.setTimeout(function(){alert('Hello!');},10000); 
  };
})();

Answer 3

ऐसा इसलिए है क्योंकि टाइमर आपके फ़ंक्शन का एक स्थानीय चर है।

फ़ंक्शन के बाहर इसे बनाने का प्रयास करें।

Answer 4

प्रतिक्रिया में इसका उपयोग करने का एक तरीका:

class Timeout extends Component {
  constructor(props){
    super(props)

    this.state = {
      timeout: null
    }

  }

  userTimeout(){
    const { timeout } = this.state;
    clearTimeout(timeout);
    this.setState({
      timeout: setTimeout(() => {this.callAPI()}, 250)
    })

  }
}

यदि उपयोगकर्ता ने उदाहरण के लिए टाइप करना बंद कर दिया है तो आप केवल एक एपीआई को कॉल करना चाहेंगे। UserTimeout फ़ंक्शन को इनपुट पर onKeyUp के माध्यम से बांधा जा सकता है।

Comments

यह वही है जो मैं कुछ घंटों के लिए देख रहा हूं, धन्यवाद। मैं सोच रहा था कि क्या इस तरह के परिणाम के लिए एक बेहतर तरीका हो सकता है?

— निकवास

@nikasv थ्रॉटल, और debouncing दो विकल्प हैं: medium.com/@_jh3y/...

— zero_cool

Answer 5

यकीन नहीं होता कि यह कुछ अच्छे अभ्यास कोडिंग नियम का उल्लंघन करता है, लेकिन मैं आमतौर पर इस के साथ बाहर आता हूं:

if(typeof __t == 'undefined')
        __t = 0;
clearTimeout(__t);
__t = setTimeout(callback, 1000);

यह टाइमर को फ़ंक्शन से बाहर घोषित करने की आवश्यकता को रोकता है।

संपादित करें: यह भी प्रत्येक आह्वान पर एक नया चर घोषित नहीं करता है, लेकिन हमेशा एक ही रीसायकल करता है।

उम्मीद है की यह मदद करेगा।

Answer 6

यह अच्छा काम करता है। यह एक प्रबंधक है जिसे मैंने इवेंट को संभालने के लिए बनाया है। पकड़ के लिए घटनाओं, और जब आप जाने के लिए है।

function onUserHold(element, func, hold, clearfunc) {
    //var holdTime = 0;
    var holdTimeout;

    element.addEventListener('mousedown', function(e) {
        holdTimeout = setTimeout(function() {
            func();
            clearTimeout(holdTimeout);
            holdTime = 0;
        }, hold);
        //alert('UU');
    });

    element.addEventListener('mouseup', clearTime);
    element.addEventListener('mouseout', clearTime);

    function clearTime() {
        clearTimeout(holdTimeout);
        holdTime = 0;
        if(clearfunc) {
            clearfunc();
        }
    }
}

तत्व पैरामीटर वह है जिसे आप पकड़ते हैं। फंक पैरामीटर फायर करता है जब यह पैरामीटर होल्ड द्वारा निर्दिष्ट कई मिली सेकंड के लिए होता है। क्लीयरफंक परम वैकल्पिक है और अगर यह दिया जाता है, तो यह निकाल दिया जाएगा यदि उपयोगकर्ता तत्व को छोड़ देता है या छोड़ देता है। आप अपनी मनचाही सुविधाओं को प्राप्त करने के लिए कुछ काम-काज भी कर सकते हैं। का आनंद लें! :)

Answer 7

एक ड्रॉपडाउन मेनू के लिए Jquery का उपयोग करके व्यावहारिक उदाहरण! #IconLoggedinUxExternal शो पर माउस पर # ExternalMenuLogin को दिखाता है और div को छुपाने के लिए समय निर्धारित करता है # ExternalMenuLogin

Div # ExternalMenuLogin पर माउस पर यह टाइमआउट को रद्द कर देता है। Div # ExternalMenuLogin पर माउस आउट करने पर यह टाइमआउट सेट करता है।

यहां बिंदु हमेशा टाइमआउट सेट करने से पहले क्लियर टाइमआउट को लागू करने के लिए है, इसलिए, दोहरे कॉल से बचते हुए

var ExternalMenuLoginTO;
$('#IconLoggedinUxExternal').on('mouseover mouseenter', function () {

    clearTimeout( ExternalMenuLoginTO )
    $("#ExternalMenuLogin").show()
});

$('#IconLoggedinUxExternal').on('mouseleave mouseout', function () {

    clearTimeout( ExternalMenuLoginTO )    
    ExternalMenuLoginTO = setTimeout(
        function () {

            $("#ExternalMenuLogin").hide()

        }
        ,1000
    );
    $("#ExternalMenuLogin").show()
});

$('#ExternalMenuLogin').on('mouseover mouseenter', function () {

    clearTimeout( ExternalMenuLoginTO )
});
$('#ExternalMenuLogin').on('mouseleave mouseout', function () {

    clearTimeout( ExternalMenuLoginTO )
    ExternalMenuLoginTO = setTimeout(
        function () {

            $("#ExternalMenuLogin").hide()

        }
        ,500
    );
});