移动设备 - 在 x 时间内没有触发触摸事件

Question

我正在开发一个移动网站，如果 10 秒内没有触摸事件，我需要在该网站上显示幻灯片。我已经尝试了很多东西，但还没有完全做到。

这是我目前的代码：

window.setTimeout(function(){
    $('#slideshow').show();
    $('#slideshow').animate({
        opacity:1   
    }, 800);
}, 3000);

$('#slideshow').click(function(){
    //alert('helo');
    $('#slideshow').animate({
        opacity:0   
    }, 800, function(){
        $('#slideshow').hide();
    });

});

这可行，但我需要在这么多秒的不活动后触发显示和不透明动画。任何人都做过这个并且有一个快速的解决方案。 谢谢

更新代码：

    var waiting = window.setTimeout(function(){
                $('#slideshow').show();
                $('#slideshow').animate({
                    opacity:1   
                }, 800);
            }, 3000);

    var activity = $(window).click();

    $(document).on('activity', function() { 
        clearTimeout(waiting); 
            waiting = window.setTimeout(function(){
                $('#slideshow').show();
                $('#slideshow').animate({
                    opacity:1   
                }, 800);
            }, 3000);
    });

    $('#slideshow').click(function(){
        $('#slideshow').animate({
            opacity:0   
        }, 800, function(){
            $('#slideshow').hide();
        });

    });

这还不是很有效...最初它确实有效。幻灯片确实会等待 3 秒才会出现，如果有任何活动，幻灯片会不断重置，但幻灯片已经出现然后被删除它不会重新出现...？

任何想法 谢谢

Answer 1

定义“activity”，每当“activity”被触发时，让它清除setTimeout，然后再次启动它。

var waiting = window.setTimeout(function(){ });
$(document).on('activity', (function() { 
    clearTimeout(waiting); 
    waiting = window.setTimeout(function(){ });
});