时间戳

首页 > 解决方案 > 是否有诸如javascript窗口onidle事件之类的东西

javascript - 是否有诸如javascript窗口onidle事件之类的东西

问题描述

function init() {
    //$.ajax({url: blah-blah-blah...});
    window.myTimer = setTimeout(init, 1000);
    return;
}

我的init();循环正在运行，我想在我的窗口对象被更改（调整大小、移动等）时清除它。

完成此操作后，我希望能够调用类似于：window.addEventListener('idle', function() { if (!window.myTimer) { init(); } });

我认为通过以下方式恢复就足够安全了：

window.addEventListener('mouseup', function() { if (!window.myTimer) { init(); });

然而，这个甚至没有像我预期的那样工作，它忽略了滚动方面。我也尝试过这个onchange事件，并且随着事情的变化而触发。

有任何想法吗？

标签： javascriptevents

解决方案

因此，在快速阅读之后，花点时间测试一下；这是我对该requestIdleCallback函数的基本解释（MDN 参考）。

/* Global Variable Declarations */
window.myTimer = null;
window.counter = 0;
/* END Global Variable Declarations */

function init() {
	/* My Custom checking code here */
        document.getElementById('counter').innerHTML = window.counter+"";
	console.log(window.counter);
	window.counter += 1;
	/* End My Custom checking code */
	
	/* Non-Blocking Loop */
	window.myTimer = setTimeout(init, 50);
	/* End Non-Blocking Loop */
}

/* Event Listener Declarations */
window.addEventListener("change", function() { clearInterval(window.myTimer); window.myTimer = null; });
window.requestIdleCallback(function() { if (!window.myTimer) { init(); } });
/* END Event Listener Declarations */
<div id="counter"></div>

我在 Chrome 中测试了发布的代码和我的 jQuery ajax 代码，一切似乎都运行良好。

与试图捕获所有其他可能的事件状态相比，这是非常困难的！

我在 Edge 中测试了以下解释，它似乎运行良好：

function msDiff(timeStamp) {
	var a = timeStamp;
	var oMS = (a.getHours()*60*60*1000) + (a.getMinutes()*60*1000) + (a.getSeconds()*1000) + a.getMilliseconds();
	var b = new Date();
	var nMS = (b.getHours()*60*60*1000) + (b.getMinutes()*60*1000) + (b.getSeconds()*1000) + b.getMilliseconds();
	return nMS - oMS;
}

/* Global Variable Declarations */
window.myTimer = null;
window.myPause = new Date();
window.counter = 0;
/* END Global Variable Declarations */

function init() {
	/* My Custom checking code here */
        document.getElementById('counter').innerHTML = window.counter+"";
	console.log(window.counter);
	window.counter += 1;
	/* End My Custom checking code */
	
	/* Non-Blocking Loop */
	window.myTimer = setTimeout(init, 50);
	/* End Non-Blocking Loop */
}

function myPauseLoop() {
	if (msDiff(window.myPause) > 500) {
		init();
		return;
	} else {
		setTimeout(myPauseLoop, 500);
	}
}

/* Event Listener Declarations */
window.addEventListener("change", function() { 
	clearInterval(window.myTimer); 
	window.myTimer = null; 
	window.myPause = new Date();
});
/* End Event Listener Declarations */

init();
<div id='counter'></div>

推荐阅读