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

Question

我正在使用 jQuery Mobile 创建一个小测验、移动应用程序，并且在某些点上显示一个 3 秒的 GIF。虽然，因为它显示了很多次，我不想每次都打扰用户，如果他/她点击页面上的任何地方都会转到下一页，但我也设置了一个 setTimeout，它等待三秒钟，GIF 的意思完全显示，然后移动到下一页。如您所见，这会造成问题。如果我单击 GIF，它会移动到下一页，然后如果我再次移动到另一页，经过 3 秒后，由于 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/