javascript - 如何使用 jQuery Mobile 同步 setTimeout 和 mobile.navigate?

标签 javascript jquery html jquery-mobile mobile

我正在使用 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/

相关文章:

javascript - 使用 .text() 抓取父文本

javascript - 在静态站点的 URL 中使用参数

javascript - 如何在 jQuery 中编写三元运算符条件?

html - Bootstrap div 比手机宽度宽

javascript - 使用 jquery 处理 session

javascript - 在窗口滚动时触发 jQuery 动画数字计数器

javascript - 填充 Backbone 集合的正确方法

javascript - 测试JQuery的 "on"方法触发回调函数

jquery - 对下一个伪类重复 jQuery addClass 一定次数

python - 使用 beautifulsoup 获取 div 中的 child 文本