जावास्क्रिप्ट में निष्क्रिय समय का पता कैसे लगाएं?

Question

क्या जावास्क्रिप्ट में " निष्क्रिय " समय का पता लगाना संभव है ?
मेरा प्राथमिक उपयोग मामला संभवत: पूर्व-प्राप्त या प्री-लोड सामग्री के लिए होगा।

निष्क्रिय समय: उपयोगकर्ता की निष्क्रियता की अवधि या बिना किसी CPU उपयोग के

Comments

आप IDLE TIME को कैसे परिभाषित करते हैं?

— इते मूव -मालिमोवका २०'०

check github.com/kidh0/jquery.idle

— apneadiving

लगभग 50% उत्तरों ने शुद्ध जावास्क्रिप्ट के लिए इस तरह के एक सरल कार्य के लिए jQuery का उपयोग किया है। यह ओफ़ से परे है, खासकर ओपी को जावास्क्रिप्ट चाहिए था। स्ट्राबेरी आइसक्रीम के लिए पूछें, लेकिन इसके बजाय एक अर्ध-अलग किया हुआ खलिहान प्राप्त करें।

— कार्वर

आप के लिए

— स्टैकऑवरफ्लो

@ कर्कर - कुछ सरल के लिए एक jQuery पुस्तकालय स्थापित करने के लिए वास्तव में हास्यास्पद है, और यह प्रतिपादन समय को लंबा करता है और ऊर्जा के उपयोग को बढ़ाता है। लोगों को थोड़ा और नीचे स्क्रॉल करना चाहिए। वेनिला जावास्क्रिप्ट में एक लगभग कॉपी-पेस्ट समाधान भी है।

— फ्रैंक कॉनिजन

Answer 1

यहां JQuery का उपयोग करके एक सरल स्क्रिप्ट है जो मूसमव और कीप घटनाओं को संभालती है। यदि समय समाप्त हो जाता है, तो पृष्ठ पुनः लोड होता है।

<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 19) { // 20 minutes
        window.location.reload();
    }
}
</script>   

Comments

आप $ (दस्तावेज़) के बाद एक अर्धविराम याद कर रहे हैं। बस: सेटइंटरवल (टाइमरइन्क्रिमेंट, ६००००)

— जेसी रॉपर

@ जेसे: आपके सुझाव सभी अच्छे हैं, इस तरह से कोड होना चाहिए। लेकिन मैं सिर्फ यह बताना चाहता था कि इन परिवर्तनों के बिना भी, कोड पूरी तरह कार्यात्मक है। एक अभिव्यक्ति बयान के अंत में अर्धविराम वैकल्पिक हैं और आप वास्तव में एक स्ट्रिंग पास कर सकते हैं setInterval, जो तब जावास्क्रिप्ट के रूप में मूल्यांकन किया जाता है।

— फेलिक्स क्लिंग

आप idleTime++;इसके बजायidleTime = idleTime + 1;

— माइक कॉसर

क्या यह उपयोगकर्ता के सिस्टम पर भारी नहीं है? मान लीजिए, एक उपयोगकर्ता जो कि बहुत भारी पीसी पर एक पुराना ब्राउज़र है, वह आधे दिन के लिए एक जावास्क्रिप्ट एप्लिकेशन में काम कर रहा है, और यह इन कार्यों को संसाधित कर रहा है हर बार जब उपयोगकर्ता अपने माउस को स्थानांतरित करता है ... मुझे आश्चर्य है कि अगर यह जीता ' t उपयोगकर्ता के अनुभव को प्रभावित ...

— Sander

@PietBinnenbocht इसके अलावा, यदि आप इस तरह की चीजों का अनुकूलन करना शुरू करते हैं, तो आप प्रत्येक फ़ंक्शन को भी बदल सकते हैं जो स्ट्रिंग्स 'mousemove keydown click'को बिट फ़्लैग ( Event.MOUSEMOVE | Event.KEYDOWN | Event.CLICK) का उपयोग करने के लिए पसंद करते हैं, क्योंकि वे स्ट्रिंग ऑपरेशन की तुलना में तेज़ हैं। लेकिन क्या आप वास्तव में ऐसा करना चाहते हैं?

— किल्ला

Answer 2

JQuery का उपयोग किए बिना, केवल वेनिला जावास्क्रिप्ट:

var inactivityTime = function () {
    var time;
    window.onload = resetTimer;
    // DOM Events
    document.onmousemove = resetTimer;
    document.onkeypress = resetTimer;

    function logout() {
        alert("You are now logged out.")
        //location.href = 'logout.html'
    }

    function resetTimer() {
        clearTimeout(time);
        time = setTimeout(logout, 3000)
        // 1000 milliseconds = 1 second
    }
};

और उस फ़ंक्शन को सम्मिलित करें जहां आपको इसकी आवश्यकता है (उदाहरण के लिए: onPageLoad)।

window.onload = function() {
  inactivityTime(); 
}

यदि आपको आवश्यकता हो तो आप और अधिक DOM ईवेंट जोड़ सकते हैं। सबसे अधिक उपयोग किया जाता है:

document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer; // touchscreen presses
document.ontouchstart = resetTimer;
document.onclick = resetTimer;     // touchpad clicks
document.onkeypress = resetTimer;
document.addEventListener('scroll', resetTimer, true); // improved; see comments

या किसी सरणी का उपयोग करके वांछित घटनाओं को पंजीकृत करें

window.addEventListener('load', resetTimer, true);
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach(function(name) {
 document.addEventListener(name, resetTimer, true); 
});

DOM इवेंट सूची: http://www.w3schools.com/jsref/dom_obj_event.asp

याद रखें उपयोग window, या documentअपनी आवश्यकताओं के अनुसार। यहां आप उनके बीच अंतर देख सकते हैं: जावास्क्रिप्ट में विंडो, स्क्रीन और दस्तावेज़ के बीच अंतर क्या है?

कोड @ फ्रैंक-कोनिज़ और @daxchen में सुधार के साथ अपडेट किया गया : window.onscrollस्क्रॉलिंग तत्व के अंदर स्क्रॉल करने पर आग नहीं लगेगी , क्योंकि स्क्रॉल ईवेंट बबल नहीं करते हैं। window.addEventListener('scroll', resetTimer, true)तीसरा तर्क श्रोता को बबल चरण के बजाय कैप्चर चरण के दौरान घटना को पकड़ने के लिए कहता है।

Comments

मुझे सादा जावास्क्रिप्ट दृष्टिकोण ज्यादा अच्छा लगता है।

— मैनाटैक्स

निश्चित रूप से टाइमर को रीसेट करना एक अधिक प्रत्यक्ष / सहज और सटीक दृष्टिकोण है, टाइमआउट अपनी चीज करने के बजाय, केवल किसी अन्य चीज की पूर्णांक गणना रखने के लिए, जब टाइमर स्वयं (उच्च-परिशुद्धता) काउंटर से ही हो सकता है।

— जोश सटरफील्ड

@ mpsbhat बस एक कंसोल जोड़ें। या इस घटना को पंजीकृत करें:document.onload = function () { inactivityTime(); }; document.onmousedown = function () { inactivityTime(); }; document.onkeypress = function () { inactivityTime(); }; document.ontouchstart = function () { inactivityTime(); };

— 15

हाँ ... काम कर रहा है। jsfiddle.net/mpsbhat/6b6mja5t/1 । साभार @equiman

— mpsbhat

फ्लैग वेरिफ़ नोटिफ़ल रखना बहुत बेहतर होगा; केवल घटनाओं पर उस ध्वज को स्थापित करें। फिर रीसेटटाइमर फंक्शन टेस्ट में यदि नोटिअल फ्लैग सही है, यदि यह टाइमर उनके रीसेट करता है, या लॉगआउट कॉल करता है। यह टाइमर को लगातार रीसेट करने की जटिलता को दूर करेगा।

— मार्टिनवेब

Answer 3

इक्विमैन के उत्तर पर सुधार:

function idleLogout() {
    var t;
    window.onload = resetTimer;
    window.onmousemove = resetTimer;
    window.onmousedown = resetTimer;  // catches touchscreen presses as well      
    window.ontouchstart = resetTimer; // catches touchscreen swipes as well 
    window.onclick = resetTimer;      // catches touchpad clicks as well
    window.onkeypress = resetTimer;   
    window.addEventListener('scroll', resetTimer, true); // improved; see comments

    function yourFunction() {
        // your function for too long inactivity goes here
        // e.g. window.location.href = 'logout.php';
    }

    function resetTimer() {
        clearTimeout(t);
        t = setTimeout(yourFunction, 10000);  // time is in milliseconds
    }
}
idleLogout();

।
इसके अलावा गतिविधि का पता लगाने के बारे में सुधार, और से परिवर्तन से documentकरने के लिए window, इस स्क्रिप्ट वास्तव में फ़ंक्शन को कॉल करने, बल्कि दे है जब कि यह निष्क्रिय बैठते हैं।

यह शून्य सीपीयू उपयोग को सीधे नहीं पकड़ता है, लेकिन यह असंभव है, क्योंकि फ़ंक्शन को निष्पादित करने से सीपीयू का उपयोग होता है। और उपयोगकर्ता निष्क्रियता अंततः शून्य सीपीयू उपयोग की ओर ले जाती है, इसलिए अप्रत्यक्ष रूप से यह शून्य सीपीयू उपयोग को पकड़ता है।

Comments

बस यह इंगित करना चाहता था कि window.onscrollस्क्रॉल करने योग्य तत्व के अंदर स्क्रॉल करने पर आग नहीं लगेगी, क्योंकि स्क्रॉल ईवेंट बबल नहीं करते हैं। window.addEventListener('scroll', resetTimer, true)तीसरे तर्क का उपयोग करते हुए , श्रोता को captureचरण के बजाय चरण के दौरान घटना को पकड़ने के लिए कहता है bubble(IE> 8), इस उत्तर को देखें

— DaxChen

@DaxChen - document.onscrollएक ही समस्या नहीं है, अगर स्क्रॉलिंग बच्चे के अंदर स्क्रॉल नहीं है तो फायरिंग नहीं?

— फ्रैंक कॉनिजन

हां, मैं जो बात कह रहा था वह addEventListenerइसके बजाय उपयोग करना है onscroll।

— DaxChen

@DaxChen - ठीक है, मैं सोच रहा था कि क्या आप का मतलब है कि, इसके आसपास काम करना है, लेकिन यह अब स्पष्ट है। मैंने तदनुसार उत्तर संपादित किया। टिप्पणी के लिए धन्यवाद।

— फ्रैंक कॉनिजन

मैं इस महत्वपूर्ण जानकारी के साथ अपने उत्तर को अपडेट करूंगा, अन्य कॉपी प्राप्त करने और अपनी गलती को पेस्ट करने के लिए। धन्यवाद @DaxChen और फ्रैंक

— समान

Answer 4

मैंने एक छोटा सा दायित्व बनाया है जो एक साल पहले ऐसा करता है:

https://github.com/shawnmclean/Idle.js

विवरण:

ब्राउज़र में उपयोगकर्ता की गतिविधि की रिपोर्ट करने के लिए टिनी जावास्क्रिप्ट लाइब्रेरी (दूर, निष्क्रिय, वेबपेज को नहीं देखना, एक अलग टैब में, आदि)। कि किसी भी अन्य जावास्क्रिप्ट पुस्तकालयों जैसे कि jquery से स्वतंत्र है।

Visual Studio उपयोगकर्ता इसे NuGet से प्राप्त कर सकते हैं: PM> Install-Package Idle.js

Answer 5

यहाँ tvanfosson के विचार का एक मोटा jQuery कार्यान्वयन है:

$(document).ready(function(){

   idleTime = 0;

   //Increment the idle time counter every second.
   var idleInterval = setInterval(timerIncrement, 1000);

   function timerIncrement()
   {
     idleTime++;
     if (idleTime > 2)
     {
       doPreload();
     }
   }

   //Zero the idle timer on mouse movement.
   $(this).mousemove(function(e){
      idleTime = 0;
   });

   function doPreload()
   {
     //Preload images, etc.
   }

})

Comments

यह समाधान कीबोर्ड घटनाओं पर विचार नहीं करता है।

— डैनियल सिलवीरा

कभी setIntervalएक तार पास ! एक चर के रूप में एक फ़ंक्शन दें!

— एरिक

यह वास्तव में काम नहीं करेगा क्योंकि setInterval()वैश्विक स्कोप में अभिव्यक्ति का मूल्यांकन करने के लिए एक स्ट्रिंग पास करना और इस प्रकार यह timerIncrement()फ़ंक्शन पहले से ही उपलब्ध हैंड फ़ंक्शन के अंदर नहीं मिलेगा । यह स्ट्रिंग को पास करने के लिए अभी तक एक और कारण नहीं है setInterval()। बस एक वास्तविक फ़ंक्शन संदर्भ पास करें और आपको यह समस्या नहीं होगी क्योंकि उनका मूल्यांकन वर्तमान दायरे में किया जाता है।

— jfriend00

धन्यवाद, मुझे यह तय करने की आवश्यकता नहीं थी कि क्या सेट-स्ट्रिंग में पास होने की आवश्यकता है। मेरे उत्तर को अपडेट किया।

— पीटर जे

Answer 6

ऊपर के जेनेरिक समाधान के समान (jQuery कस्टम इवेंट के साथ) ...

// use jquery-idle-detect.js script below
$(window).on('idle:start', function(){
  //start your prefetch etc here...
});

$(window).on('idle:stop', function(){
  //stop your prefetch etc here...
});

---

//jquery-idle-detect.js
(function($,$w){
  // expose configuration option
  // idle is triggered when no events for 2 seconds
  $.idleTimeout = 2000;

  // currently in idle state
  var idle = false;

  // handle to idle timer for detection
  var idleTimer = null;

  //start idle timer and bind events on load (not dom-ready)
  $w.on('load', function(){
    startIdleTimer();
    $w.on('focus resize mousemove keyup', startIdleTimer)
      .on('blur',idleStart) //force idle when in a different tab/window
      ;
  ]);

  function startIdleTimer() {
    clearTimeout(idleTimer); //clear prior timer

    if (idle) $w.trigger('idle:stop'); //if idle, send stop event
    idle = false; //not idle

    var timeout = ~~$.idleTimeout; // option to integer
    if (timeout <= 100) timeout = 100; // min 100ms
    if (timeout > 300000) timeout = 300000; // max 5 minutes

    idleTimer = setTimeout(idleStart, timeout); //new timer
  }

  function idleStart() {
    if (!idle) $w.trigger('idle:start');
    idle = true;
  }

}(window.jQuery, window.jQuery(window)))

Answer 7

आप इसे अंडरस्कोर और jquery के साथ अधिक सुरुचिपूर्ण ढंग से कर सकते हैं -

$('body').on("click mousemove keyup", _.debounce(function(){
    // do preload here
}, 1200000)) // 20 minutes debounce

Answer 8

मेरा उत्तर विजे के उत्तर से प्रेरित था , लेकिन एक छोटा, अधिक सामान्य समाधान है जो मैंने सोचा था कि मैं किसी के लिए भी साझा करूंगा जो इसे मदद कर सकता है।

(function () { 
    var minutes = true; // change to false if you'd rather use seconds
    var interval = minutes ? 60000 : 1000; 
    var IDLE_TIMEOUT = 3; // 3 minutes in this example
    var idleCounter = 0;

    document.onmousemove = document.onkeypress = function () {
        idleCounter = 0;
    };

    window.setInterval(function () {
        if (++idleCounter >= IDLE_TIMEOUT) {
            window.location.reload(); // or whatever you want to do
        }
    }, interval);
}());

जैसा कि वर्तमान में खड़ा है, यह कोड बिना किसी माउस मूवमेंट या की प्रेस के 3 मिनट के बाद तुरंत चालू हो जाएगा और आपके वर्तमान पृष्ठ को फिर से लोड करेगा।

यह साफ और स्व-निहित तरीके से निष्क्रिय टाइमआउट को संभालने के लिए सादे वेनिला जावास्क्रिप्ट और एक तुरंत-आहरण समारोह अभिव्यक्ति का उपयोग करता है।

Comments

document.onclick जावास्क्रिप्ट कार्यों का उपयोग करता है .trigger ('क्लिक') पर विचार करता है जिसे मैंने स्वचालित लिखा था। तो यह वास्तव में एक उपयोगकर्ता बातचीत नहीं है, लेकिन यह इस मामले में निष्क्रियता को रीसेट करेगा

— कार्मेला

@ कर्मेला: मुझे यकीन नहीं है कि मैं ऐसा क्यों देख रहा हूं; मुझसे ये जरूर छूट गया होगा। धन्यवाद, मैंने onclickअसाइनमेंट को हटा दिया क्योंकि यह संभवतः इसके अतिरिक्त आवश्यक नहीं है onmousemove, लेकिन जाहिर है कि इनमें से कोई भी कार्यक्रम जो प्रोग्रामेटिक रूप से चालू होता है, रीसेट करना जारी रखेगा idleCounter। मुझे यकीन नहीं है कि आप केवल फ़ंक्शन को कॉल करने के बजाय उपयोगकर्ता इंटरैक्शन का अनुकरण क्यों करेंगे, लेकिन अगर ऐसा कुछ है जो आपको किसी कारण से करने की आवश्यकता है, तो यह उत्तर स्पष्ट रूप से आपके लिए काम नहीं करेगा, और न ही अधिकांश अन्य उत्तर I ' इस सवाल को देखा।

— जॉनी'रोज

Answer 9

मैं इसे एक अपेक्षाकृत पुराना प्रश्न जानता हूं, लेकिन मेरे पास एक ही मुद्दा था और मुझे एक अच्छा समाधान मिला।

मैंने इस्तेमाल किया: jquery.idle और मुझे केवल करने की ज़रूरत थी:

$(document).idle({
  onIdle: function(){
    alert('You did nothing for 5 seconds');
  },
  idle: 5000
})

JsFiddle डेमो देखें ।

(बस जानकारी के लिए: यह बैक-एंड ईवेंट ट्रैकिंग लीडर्स ब्राउज़रलोड के लिए देखें )

Comments

मैं इस समारोह को कैसे रोक सकता हूं, उन्होंने एक घटना को बेकार बताया: बंद करो, लेकिन मैं ईमानदारी से नहीं जानता कि यह कैसे उपयोग करना है। मैं चाहता हूं कि अगर मैं अगले पृष्ठ पर चला गया (ajax आधारित तो केवल HTML पृष्ठ का टुकड़ा अद्यतन) तो निष्क्रिय फ़ंक्शन बंद हो जाता है। क्या आप जानते हैं कि इसे कैसे प्राप्त किया जाए?

— मुबाशेर

यहाँ यह कहता है: "निष्क्रिय: बंद करो": उपयोगकर्ता ट्रैकिंग

— डीडीएन

मैं पहले ही पढ़ चुका हूं लेकिन यह पता नहीं लगा सका कि इसका उपयोग कैसे करना है, क्या आप मेरी मदद कर सकते हैं?

— मुबाशेर

यदि आप चाहते हैं कि यह केवल एक बार आग लग जाए, तो आप keepTrackingविकल्प को सेट कर सकते हैं false। यदि आपका रीसेट करना चाहते हैं तो आप पुन: स्थापित करने का प्रयास कर सकते हैं। यहाँ एक संशोधित उदाहरण है जो केवल एक बार आग

— लगाएगा

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

— मुबाशर

Answer 10

पिछले सभी उत्तरों में एक हमेशा सक्रिय मूसमोव हैंडलर है। यदि हैंडलर jQuery है, तो अतिरिक्त प्रोसेसिंग jQuery प्रदर्शन जोड़ सकता है। खासकर यदि उपयोगकर्ता गेमिंग माउस का उपयोग कर रहा है, तो प्रति सेकंड 500 घटनाएँ हो सकती हैं।

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

function setIdleTimeout(millis, onIdle, onUnidle) {
    var timeout = 0;
    startTimer();

    function startTimer() {
        timeout = setTimeout(onExpires, millis);
        document.addEventListener("mousemove", onActivity);
        document.addEventListener("keydown", onActivity);
    }

    function onExpires() {
        timeout = 0;
        onIdle();
    }

    function onActivity() {
        if (timeout) clearTimeout(timeout);
        else onUnidle();
        //since the mouse is moving, we turn off our event hooks for 1 second
        document.removeEventListener("mousemove", onActivity);
        document.removeEventListener("keydown", onActivity);
        setTimeout(startTimer, 1000);
    }
}

http://jsfiddle.net/jndxq51o/

Comments

क्या यह कार्य स्वचालित रूप से होगा यदि एक पृष्ठ पर रखा गया है, या क्या इसे $ (दस्तावेज़) (।) () आवरण के अंदर होना चाहिए? धन्यवाद! इसके अलावा, वह भाग कहाँ है जो टाइमर समाप्त होने पर एक क्रिया करता है?

— Oranges13

दस्तावेज़ तैयार होने से पहले ही आप इसे कभी भी कॉल कर सकते हैं। आप एक फ़ंक्शन 'कॉलबैक' पास करते हैं जिसे टाइमर समाप्त होने पर कॉल किया जाएगा।

— सरसापैरिला

इसके $(startTimer)समतुल्य है $(document).ready(startTimer), यह सुनिश्चित करता है कि आप चूहे और कीप इवेंट को हुक करने से पहले DOM तैयार है।

— सरसापरिल्ला 18

+1 यह वही है जो मैं करता हूं - मूसमोव हैंडलर्स सुस्ती और कम बैटरी लाइफ में योगदान करते हैं, इसलिए केवल समय-समय पर इसे चालू करना एक महान विचार है यदि आप मामूली समय त्रुटि को बर्दाश्त कर सकते हैं। मैं आमतौर पर स्वचालित सत्र समाप्ति चेतावनी के लिए निष्क्रिय समय का पता लगाने का उपयोग करता हूं (जैसे "क्या आप अभी भी वहां हैं?"), इसलिए मैं एक उपयोगकर्ता के "निष्क्रिय" होने से कई मिनट पहले होता हूं, इस मामले में एक छोटी सी समय त्रुटि पूरी तरह से अप्रासंगिक है।

— बकरी

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

— एफेरर

Answer 11

आप संभवतः प्रपत्र के शरीर पर माउस की गति का पता लगाकर और पिछले आंदोलन समय के साथ एक वैश्विक चर को अपडेट करके एक साथ कुछ हैक कर सकते हैं। फिर आपको अंतराल टाइमर चलाने की आवश्यकता होगी जो समय-समय पर पिछले आंदोलन के समय की जांच करता है और कुछ करता है अगर यह पिछले माउस आंदोलन का पता लगाने के बाद पर्याप्त रूप से लंबे समय से है।

Comments

यह ध्यान रखना महत्वपूर्ण है कि स्क्रिप्ट केवल पृष्ठ के मुख्य भाग पर गति का पता लगाने में सक्षम होगी, सभी उपयोगकर्ता इनपुट के लिए नहीं। मुझे नहीं लगता कि जावास्क्रिप्ट से सीपीयू या प्रक्रिया की जानकारी प्राप्त करने का कोई तरीका है।

— डेव स्वार्स्की

मैंने आपके विचार को jQuery में लागू करने की स्वतंत्रता ली।

— पीटर जे

Answer 12

मैंने गतिविधि का पता लगाने के लिए एक छोटा ईएस 6 वर्ग लिखा था और अन्यथा निष्क्रिय समय समाप्त होने पर आग की घटनाएँ। यह कीबोर्ड, माउस और टच को कवर करता है , सक्रिय और निष्क्रिय किया जा सकता है और इसमें बहुत दुबला एपीआई है:

const timer = new IdleTimer(() => alert('idle for 1 minute'), 1000 * 60 * 1);
timer.activate();

यह jQuery पर निर्भर नहीं करता है, हालांकि आपको पुराने ब्राउज़रों का समर्थन करने के लिए बैबिल के माध्यम से इसे चलाने की आवश्यकता हो सकती है।

https://gist.github.com/4547ef5718fd2d31e5cdcafef0208096

कुछ प्रतिक्रिया मिलने के बाद मैं इसे npm पैकेज के रूप में जारी कर सकता हूं।

Answer 13

यदि आप एक समर्थित ब्राउज़र (दिसंबर 2018 तक क्रोम या फ़ायरफ़ॉक्स) को लक्षित कर रहे हैं, तो आप requestIdleCallback के साथ प्रयोग कर सकते हैं और असमर्थित ब्राउज़रों के लिए requestIdleCallback शिम को शामिल कर सकते हैं।

Comments

और अन्य ब्राउज़रों को अकेला छोड़ दें?

— फ्रैंक कॉनिज़ेन

शिम सभी ब्राउज़रों को कवर करता है। और यह एकमात्र उत्तर था! अन्य धीमे उत्तर माउस के बारे में हैं। अन्तरक्रियाशीलता या सीपीयू को केवल एक उदाहरण के रूप में कहा गया था। माउस समाधान के साथ सीपीयू निष्क्रिय का पता कैसे लगाएं?

Answer 14

इस कोड को आज़माएं, यह पूरी तरह से काम करता है।

var IDLE_TIMEOUT = 10; //seconds
var _idleSecondsCounter = 0;

document.onclick = function () {
    _idleSecondsCounter = 0;
};

document.onmousemove = function () {
    _idleSecondsCounter = 0;
};

document.onkeypress = function () {
    _idleSecondsCounter = 0;
};

window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {
    _idleSecondsCounter++;
    var oPanel = document.getElementById("SecondsUntilExpire");
    if (oPanel)
        oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        alert("Time expired!");
        document.location.href = "SessionExpired.aspx";
    }
}

Comments

प्लस 1 वनीला जेएस होने के लिए

— शीतदंश

Answer 15

<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement.
    $('body').mousemove(function (e) {
     //alert("mouse moved" + idleTime);
     idleTime = 0;
    });

    $('body').keypress(function (e) {
      //alert("keypressed"  + idleTime);
        idleTime = 0;
    });



    $('body').click(function() {
      //alert("mouse moved" + idleTime);
       idleTime = 0;
    });

});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 10) { // 10 minutes

        window.location.assign("http://www.google.com");
    }
}
</script> 

मुझे लगता है कि यह jquery कोड एक सही है, हालांकि उपरोक्त उत्तरों से कॉपी और संशोधित किया गया है !! donot अपनी फाइल में jquery लाइब्रेरी को शामिल करना भूल गया!

Answer 16

इन सभी समाधानों के साथ समस्या, हालांकि सही है, वे अव्यावहारिक हैं, जब सत्र टाइमआउट मूल्यवान सेट को ध्यान में रखते हुए, PHPF, .NET का उपयोग करके या कोल्डफ़्यूज़न डेवलपर्स के लिए Application.cfc फ़ाइल में। उपरोक्त समाधान द्वारा निर्धारित समय को सर्वर साइड सत्र टाइमआउट के साथ सिंक करने की आवश्यकता है। यदि दोनों सिंक नहीं करते हैं, तो आप उन समस्याओं में भाग सकते हैं, जो आपके उपयोगकर्ताओं को निराश और भ्रमित करेंगी। उदाहरण के लिए, सर्वर साइड सेशन का समय 60 मिनट के लिए निर्धारित किया जा सकता है, लेकिन उपयोगकर्ता यह मान सकता है कि वह सुरक्षित है, क्योंकि जावास्क्रिप्ट निष्क्रिय समय पर कब्जा करने से उपयोगकर्ता द्वारा किसी एक पृष्ठ पर बिताए जाने वाले कुल समय में वृद्धि हुई है। उपयोगकर्ता ने लंबे समय तक फॉर्म भरने में समय बिताया होगा, और फिर उसे सबमिट करने के लिए जाएगा। फॉर्म सबमिट होने से पहले सत्र का समय समाप्त हो सकता है। मैं अपने उपयोगकर्ताओं को केवल 180 मिनट देता हूं, और फिर उपयोगकर्ता को स्वचालित रूप से लॉग आउट करने के लिए जावास्क्रिप्ट का उपयोग करें। अनिवार्य रूप से, ऊपर दिए गए कुछ कोड का उपयोग करके, एक साधारण टाइमर बनाने के लिए, लेकिन कैप्चरिंग माउस इवेंट भाग के बिना। इस तरह मेरा क्लाइंट साइड और सर्वर साइड टाइम पूरी तरह से सिंक हो जाता है। कोई भ्रम नहीं है, यदि आप अपने यूआई में उपयोगकर्ता को समय दिखाते हैं, क्योंकि यह कम हो जाता है। हर बार CMS में एक नया पेज एक्सेस किया जाता है, सर्वर साइड सेशन और जावास्क्रिप्ट टाइमर रीसेट हो जाता है। सरल और सुरुचिपूर्ण। यदि कोई उपयोगकर्ता एक ही पृष्ठ पर 180 मिनट से अधिक समय तक रहता है, तो मुझे लगता है कि पृष्ठ में कुछ गड़बड़ है, पहली बार में। जैसा कि यह कम हो जाता है। हर बार CMS में एक नया पेज एक्सेस किया जाता है, सर्वर साइड सेशन और जावास्क्रिप्ट टाइमर रीसेट हो जाता है। सरल और सुरुचिपूर्ण। यदि कोई उपयोगकर्ता एक ही पृष्ठ पर 180 मिनट से अधिक समय तक रहता है, तो मुझे लगता है कि पृष्ठ में कुछ गड़बड़ है, पहली बार में। जैसा कि यह कम हो जाता है। हर बार CMS में एक नया पेज एक्सेस किया जाता है, सर्वर साइड सेशन और जावास्क्रिप्ट टाइमर रीसेट हो जाता है। सरल और सुरुचिपूर्ण। यदि कोई उपयोगकर्ता एक ही पृष्ठ पर 180 मिनट से अधिक समय तक रहता है, तो मुझे लगता है कि पृष्ठ में कुछ गड़बड़ है, पहली बार में।

Comments

हाँ, यही कारण है कि मैं केवल सर्वर साइड सत्रों से छुटकारा पाने और html फ़ाइलों से सब कुछ लोड करने के बाद ऐसा कर रहा हूं।

— दान पार्कर

Answer 17

शुद्ध जावास्क्रिप्ट ठीक से सेट समय और बाइंडिंग के माध्यम से addEventListener

(function() {

  var t,
    timeout = 5000;

  function resetTimer() {
    console.log("reset: " + new Date().toLocaleString());
    if (t) { 
      window.clearTimeout(t); 
    }
    t = window.setTimeout(logout, timeout);
  }

  function logout() {
    console.log("done: " + new Date().toLocaleString());
  }
  resetTimer();

  //And bind the events to call `resetTimer()`
  ["click", "mousemove", "keypress"].forEach(function(name) {
    console.log(name);
    document.addEventListener(name, resetTimer);
  });

}());

Answer 18

(आंशिक रूप से इस धागे में इक्विमैन के अच्छे मूल तर्क से प्रेरित है।)

sessionExpiration.js

---

sessionExpiration.js हल्का है फिर भी प्रभावी और अनुकूलन योग्य है। एक बार लागू होने के बाद, केवल एक पंक्ति में उपयोग करें:

sessionExpiration(idleMinutes, warningMinutes, logoutUrl);

• सभी टैब को प्रभावित करता हैब्राउज़र के है, न कि केवल एक को।
• शुद्ध जावास्क्रिप्ट में लिखा है , जिसमें कोई निर्भरता नहीं है। पूरी तरह से ग्राहक पक्ष।
• (यदि ऐसा है तो चाहता था।) है बैनर चेतावनी और उलटी गिनती कि उपयोगकर्ता बातचीत द्वारा रद्द कर दिया गया है घड़ी,।
• सीधे शब्दों में शामिल sessionExpiration.js , और, फ़ंक्शन को कॉल तर्क के साथ [1] निष्क्रिय मिनट की संख्या (समस्त टैब पर) जब तक उपयोगकर्ता लॉग आउट किया जाता है, [2] चेतावनी और उलटी गिनती जब तक निष्क्रिय मिनट की संख्या प्रदर्शित किया जाता है, और [3] लॉगआउट url।
• CSS को अपनी स्टाइलशीट में रखें। यदि आप चाहें तो इसे अनुकूलित करें।(यदि आप नहीं चाहते हैं तो बैनर को छोड़ें और हटाएं।)
• यदि आप करते हैं लेकिन चेतावनी बैनर चाहते हैं, तो आप आईडी के साथ एक खाली div करना होगा sessExpirDiv अपने पृष्ठ पर (एक सुझाव पाद लेख में डालने जाता है) ।
• यदि दिए गए अवधि के लिए सभी टैब निष्क्रिय हो गए हैं तो अब उपयोगकर्ता स्वचालित रूप से लॉग आउट हो जाएगा।
• वैकल्पिक: आप फ़ंक्शन को चौथा तर्क (URL serverRefresh) प्रदान कर सकते हैं, ताकि पेज के साथ इंटरैक्ट करने पर सर्वर साइड सेशन टाइमर भी रिफ्रेश हो जाए।

---

यदि आप CSS को नहीं बदलते हैं तो यह कार्रवाई में कैसा दिखता है, इसका एक उदाहरण है।

Answer 19

मैंने एक साधारण jQuery प्लगइन लिखा है, जो आप की तलाश में है।

https://github.com/afklondon/jquery.inactivity

$(document).inactivity( {
    interval: 1000, // the timeout until the inactivity event fire [default: 3000]
    mouse: true, // listen for mouse inactivity [default: true]
    keyboard: false, // listen for keyboard inactivity [default: true]
    touch: false, // listen for touch inactivity [default: true]
    customEvents: "customEventName", // listen for custom events [default: ""]
    triggerAll: true, // if set to false only the first "activity" event will be fired [default: false]
});

स्क्रिप्ट माउस, कीबोर्ड, टच और अन्य कस्टम इवेंट निष्क्रियता (निष्क्रिय) और आग वैश्विक "गतिविधि" और "निष्क्रियता" घटनाओं के लिए सुनेगी।

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

Comments

क्या वास्तव में देरी की आवश्यकता है, एक कस्टम इवेंट हैंडलर से कस्टम इवेंट को ट्रिगर करना पर्याप्त नहीं है?

— Hibou57

Answer 20

बस कुछ विचार, एक अवसर या दो का पता लगाने के लिए।

क्या प्रत्येक 10 सेकंड में एक फ़ंक्शन चलाना संभव है, और क्या एक "काउंटर" चर की जांच करना है? यदि यह संभव है, तो आप पृष्ठ के लिए माउसओवर पर हो सकते हैं, क्या आप नहीं कर सकते? यदि ऐसा है, तो "काउंटर" चर को रीसेट करने के लिए माउसओवर इवेंट का उपयोग करें। यदि आपका फ़ंक्शन कहा जाता है, और काउंटर उस सीमा से ऊपर है जिसे आप पूर्व निर्धारित करते हैं, तो अपनी कार्रवाई करें।

फिर से, बस कुछ विचार ... आशा है कि यह मदद करता है।

Answer 21

मैंने इस कोड को काम करने वाली फ़ाइल का परीक्षण किया है:

var timeout = null;
    var timee = '4000'; // default time for session time out.
    $(document).bind('click keyup mousemove', function(event) {

    if (timeout !== null) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
              timeout = null;
            console.log('Document Idle since '+timee+' ms');
            alert("idle window");
        }, timee);
    });

Answer 22

यहाँ सबसे अच्छा समाधान मैंने पाया है: http://css-tricks.com/snippets/jquery/fire-event-when-user-is-idle/

यहाँ जेएस है:

idleTimer = null;
idleState = false;
idleWait = 2000;

(function ($) {

    $(document).ready(function () {

        $('*').bind('mousemove keydown scroll', function () {

            clearTimeout(idleTimer);

            if (idleState == true) { 

                // Reactivated event
                $("body").append("<p>Welcome Back.</p>");            
            }

            idleState = false;

            idleTimer = setTimeout(function () { 

                // Idle Event
                $("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>");

                idleState = true; }, idleWait);
        });

        $("body").trigger("mousemove");

    });
}) (jQuery)

Answer 23

आप नीचे दिए गए समाधान का उपयोग कर सकते हैं

var idleTime;
$(document).ready(function () {
         reloadPage();
        $('html').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
            clearTimeout(idleTime);
            reloadPage();
        });
});
function reloadPage() {
    clearTimeout(idleTime);
    idleTime = setTimeout(function () {
        location.reload();
    }, 3000);
}

Answer 24

मैं इस दृष्टिकोण का उपयोग करता हूं, क्योंकि आपको उस समय को लगातार रीसेट करने की आवश्यकता नहीं होती है जब कोई घटना होती है, इसके बजाय हम केवल समय रिकॉर्ड करते हैं, इससे निष्क्रिय प्रारंभ बिंदु उत्पन्न होता है।

           function idle(WAIT_FOR_MINS, cb_isIdle) {
            var self = this, 
                idle,
                ms = (WAIT_FOR_MINS || 1) * 60000,
                lastDigest = new Date(),
                watch;
            //document.onmousemove = digest;
            document.onkeypress = digest;
            document.onclick = digest;

            function digest() {
               lastDigest = new Date(); 
            }
            // 1000 milisec = 1 sec
            watch = setInterval(function(){
                if (new Date() - lastDigest > ms && cb_isIdel) {
                    clearInterval(watch);
                    cb_isIdle();
                }

            }, 1000*60);    
        },

Answer 25

आप शायद अपने वेब पेज पर सूचीबद्ध mousemove ट्रिक्स का उपयोग करके निष्क्रियता का पता लगा सकते हैं, लेकिन यह आपको नहीं बताएगा कि उपयोगकर्ता किसी अन्य विंडो या टैब में किसी अन्य पेज पर नहीं है, या उपयोगकर्ता वर्ड या फ़ोटोशॉप में है, या WOW और इस समय केवल अपने पृष्ठ को नहीं देख रहा हूँ। आम तौर पर मैं सिर्फ प्रीफैच करता हूं और क्लाइंट के मल्टी-टास्किंग पर भरोसा करता हूं। यदि आपको वास्तव में इस कार्यक्षमता की आवश्यकता है तो आप विंडोज़ में एक सक्रिय नियंत्रण के साथ कुछ करते हैं, लेकिन यह सबसे अच्छा है।

Answer 26

यहां पर कोणीय में पूर्ण करने के लिए एक AngularJS सेवा है।

/* Tracks now long a user has been idle.  secondsIdle can be polled 
   at any time to know how long user has been idle. */
fuelServices.factory('idleChecker',['$interval', function($interval){
    var self = {
        secondsIdle: 0,
        init: function(){
            $(document).mousemove(function (e) {
                self.secondsIdle = 0;
            });
            $(document).keypress(function (e) {
                self.secondsIdle = 0;
            });
            $interval(function(){
                self.secondsIdle += 1;
            }, 1000)
        }
    }
    return self;
}]);

ध्यान रखें कि यह निष्क्रिय चेकर सभी मार्गों के लिए चलेगा, इसलिए इसे .run()कोणीय ऐप के लोड पर आरंभीकृत किया जाना चाहिए । फिर आप idleChecker.secondsIdleप्रत्येक मार्ग के अंदर उपयोग कर सकते हैं ।

myApp.run(['idleChecker',function(idleChecker){
    idleChecker.init();
}]);

Answer 27

बहस वास्तव में एक महान विचार है! यहाँ jQuery के मुफ्त परियोजनाओं के लिए संस्करण:

const derivedLogout = createDerivedLogout(30);
derivedLogout(); // it could happen that user too idle)
window.addEventListener('click', derivedLogout, false);
window.addEventListener('mousemove', derivedLogout, false);
window.addEventListener('keyup', derivedLogout, false); 

function createDerivedLogout (sessionTimeoutInMinutes) {
    return _.debounce( () => {
        window.location = this.logoutUrl;
    }, sessionTimeoutInMinutes * 60 * 1000 ) 
}

Answer 28

यह जितना सरल हो सकता है, यह पता लगाएं कि माउस कब चलता है:

var idle = false;

document.querySelector('body').addEventListener('mousemove', function(e) {
    if(idle!=false)idle = false;
});

var idleI = setInterval(function()
{   
    if(idle == 'inactive')
    {
        return;
    }

    if(idle == true)
    {
        idleFunction();
        idle = 'inactive';
        return;
    }

    idle = true;
}, 30000);// half the expected time, idle will trigger after 60s in this case.

function idleFuntion()
{
   console.log('user is idle');
}

Answer 29

अच्छी तरह से आप एक क्लिक या mousemove घटना को दस्तावेज़ निकाय से जोड़ सकते हैं जो एक टाइमर रीसेट करता है। एक फ़ंक्शन है जिसे आप समयबद्ध अंतराल पर कॉल करते हैं जो यह जांचता है कि टाइमर एक निर्दिष्ट समय (जैसे 1000 मिली) से अधिक है और आपकी लोडिंग शुरू कर रहा है।

Answer 30

जावास्क्रिप्ट का सीपीयू उपयोग बताने का कोई तरीका नहीं है। इससे सैंडबॉक्स जावास्क्रिप्ट रन अंदर टूट जाएगा।

इसके अलावा, पृष्ठ के ऑनमूवर और ऑनकीडाउन घटनाओं को हुक करना शायद काम करेगा।

आप एक समय के बाद किसी फ़ंक्शन को शेड्यूल करने के लिए ऑनलोड ईवेंट में सेटटाइमआउट का उपयोग भी कर सकते हैं।

// Call aFunction after 1 second
window.setTimeout(aFunction, 1000);

Comments

मुझे आश्चर्य है कि इस उत्तर पर इतने सारे डाउनवोट क्यों। जहां तक ​​मैं देख सकता हूं, इसने पूछे गए प्रश्न का उत्तर दिया, और तथ्यात्मक रूप से सही है। केवल विस्तृत कोड उदाहरण को रोल करने के लिए नहीं गया था।

— इफेडि ओकोंकोवू

अब एक जावास्क्रिप्ट फ़ंक्शन को कॉल करना संभव है जब "फ्रेम के अंत में खाली समय हो, या जब उपयोगकर्ता निष्क्रिय हो।" Developers.google.com/web/updates/2015/08/…

— Max

setTimeout 0 शायद