Question

我正在使用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会多次显示，而不仅仅是一次。有关于此的任何想法吗？

Answer 1

您是否尝试过这种方法：

$(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/

如何使用jQuery Mobile同步setTimeout和mobile.navigate？

1 个答案: