所以我想做的是:如果我的ajax请求返回了一些东西,我想播放一个声音。如果用户在15秒内到达标签,那么什么都不会发生。但如果他需要超过15秒,就会发出警报。我似乎无法让这种行为奏效。。。。
$.getJSON('/orders/'+restaurant+'/.json', function(data) {
$.each(data, function(key, val) {
//does some processing on the data
});
if (data.length > 0){
$('#play_sound').html('<iframe width="1" height="1" src="http://www.youtube.com/embed/3puTnBV8DbQ?autoplay=1" frameborder="0" ></iframe>');
setTimeout
(
function()
{
var isActive;
window.focus = function (){
isActive = true;
}
window.onblur = function() {
isActive = false;
};
if ((!isActive)){
alert('ajax request returned info');
}
}
, 15000
);
}
现在我知道我可能需要一个额外的变量,就像一个计数器。。。我不知道。。
建议?
您当前的流程如下所示:
- ajax请求成功
- 15秒后,
setTimeout
创建两个事件处理程序来侦听window.focus
(应为window.onfocus
)和window.onblur
- 在同一个
setTimeout
调用中,检查isActive
的值,它是undefined
。由于脚本没有时间侦听焦点或模糊事件(因为它们是早些时候在同一个setTimeout
语句中创建的),这意味着isActive
没有被赋予值
您的变量isActive
以及函数应该单独全局声明:
var isActive = true;
window.onfocus = function () {
isActive = true;
};
window.onblur = function() {
isActive = false;
};
然后,像这样使用您的超时:
// Ajax request succeeds above
setTimeout(function() {
if (!isActive) {
alert("ajax request returned info");
}
}, 15000);
这样,isActive
是一个全局可用的变量,它将始终知道窗口是否处于活动状态。
编辑
还有一个问题。如果用户听到通知,将注意力集中在窗口上阅读,然后再次模糊窗口,该怎么办?当15秒过去时,即使已经看到通知,由于窗口未聚焦,仍会发出警报。
因此,让我们通过将setTimeout
设置为提醒变量来解决此问题,一旦窗口聚焦,我们就可以取消该变量
var isActive = true;
var reminder = false;
window.onfocus = function () {
isActive = true;
if (reminder !== false) {
clearTimeout(reminder);
reminder = false;
}
};
window.onblur = function() {
isActive = false;
};
然后,将第二个片段替换为:
// Ajax request succeeds above
reminder = setTimeout(function() {
if (!isActive) {
alert("ajax request returned info");
}
}, 15000);
因此,如果用户在警报响起之前看到通知,那么警报将被取消。
您的代码有两个问题。
第一种方法是覆盖窗口对象的focus
方法,而不是通过onfocus
分配处理程序。
第二个问题是,您需要在超时和成功回调之外分配处理程序,以便在执行超时时数据可用:
dvar isActive = true; //the window is focused when the code is executed first
//all this will happen independently of the AJAX call so that state is available when the timeout executes
window.onfocus = function () {
isActive = true; //window gains focus while waiting for the AJAX call to finish
};
window.onblur = function () {
isActive = false; //window loses focus focus while waiting for the AJAX call to finish
};
$.getJSON('/orders/' + restaurant + '/.json', function (data) {
$.each(data, function (key, val) {
//does some processing on the data
});
if (data.length > 0) {
$('#play_sound').html('<iframe width="1" height="1" src="http://www.youtube.com/embed/3puTnBV8DbQ?autoplay=1" frameborder="0" ></iframe>');
setTimeout(function () {
if ((!isActive)) {
alert('ajax request returned info');
}
}, 15000);
}
});