我正在使用 jQuery Mobile 创建一个小测验、移动应用程序,并且在某些时间点显示 3 秒的 GIF。虽然,因为它显示了很多次,我不想每次都打扰用户,如果他/她点击页面上的任何地方,它会转到下一页,但我也设置了一个 setTimeout,它等待三秒钟,GIF 的含义完全显示,然后移动到下一页。如您所见,这会产生问题。如果我单击 GIF,它会移动到下一页,然后如果我再次移动到另一页,三秒后,由于 setTimeout,它会将我送回上一页。我有以下代码:
编辑:
$(document).on("pagechange", function(event, ui) {
var clicked = false;
// Here comes some if-else statements checking which page is currently active
else if ($.mobile.activePage[0].id == "correctGIF") {
correct++;
nextpage = hashtag.concat(page, 'Correct');
$('#correctGIF').append('<img src="images/Correct1.gif">');
$('#correctGIF').click(function() {
clicked = true;
$.mobile.navigate(nextpage);
alert("alert from click");
});
setTimeout(function() {
if (!clicked) {
$.mobile.navigate(nextpage);
alert("alert from timeout");
}
}, 3000);
}
所以,我需要以某种方式同步它。如果有点击它应该忽略 setTimeout 部分,如果没有点击它应该等待三秒钟让 GIF 完成,这意味着应该激活 setTimeout 部分。另请注意,此 GIF 在测验期间会多次显示,而不仅仅是一次。对此有什么想法吗?
最佳答案
你试过这种方法吗:
$(document).ready(function () {
$('#correctGIF').off('click').on('click', function () {
alert('navigate from click');
console.log('navigate from click');
if (!$('#correctGIF').hasClass('clickedImageClass')) {
$('#correctGIF').addClass('clickedImageClass');
}
});
setTimeout(function () {
if (!$('#correctGIF').hasClass('clickedImageClass')) {
alert('navigate from timeout');
console.log('navigate from timeout');
}
}, 3000);
});
JsFiddle 演示在这里:http://jsfiddle.net/e35pn/13/
关于javascript - 如何使用 jQuery Mobile 同步 setTimeout 和 mobile.navigate?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24160314/