Question

我正在尝试在我的网站上获取屏幕保护程序。因此请求的细分如下：

检测onload，点击并触摸并启动计数为5的计时器秒。每当它检测到onload时，点击并触摸它重置计时器重新开始。
5秒钟后会发出警告，告诉你5点钟屏幕保护程序将启动秒。
屏幕保护程序启动，点击后返回主页，从头再次开始这个过程。

的问题：

我遇到了javascript setInterval的问题 clearInterval函数，导致计数器运行彼此所以我认为我可能会在错误的地方使用它们。
我收到了数以千计的“Touched”登录到控制台表示它在$( 'body' ).bind( 'touchstart click', function(event)事件之后启动，我不能理解。

这是我的javascript代码：

// Start screensaver in the background
var ss1 = setInterval(function() {
    $('#screensaver > div:first')
    .animate( { opacity: 0 }, 1000 )
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#screensaver');
    console.log("screensaver cycles every 2 seconds");
},  2000);
// End of section -- Start screensaver in the background

$( 'body' ).bind( 'touchstart click', function(event) {

    console.log( 'Touched' );    
    var timeoutVar = setInterval( function(){

        $( '#screensaver_warning_button' ).trigger( 'click' );
        clearInterval( timeoutVar );

        var secondTimeoutVar = setInterval(function(){

            $( '#screensaver' ).show();
            clearInterval( secondTimeoutVar );

        }, 5000);

    }, 5000);

});

这是HTML：

<a href="index.html">
    <div id="screensaver" class="screensaver">
      <div><img src="img/landing-bg_1.jpg" alt="text" /></div>
      <div><img src="img/landing-bg_2.jpg" alt="text" /></div>
      <div><img src="img/landing-bg_3.jpg" alt="text" /></div>
    </div>
</a>

警告屏幕保护程序应该出现的模式（我正在使用Bootstrap）：

<div class="modal fade" id="screensaver_warning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <h1>Screensaver will start soon, if you would like to continue, please press the button below.</h1>
        </div>
    </div>
</div>

感谢您的帮助。

Answer 1

试试这个，希望它有所帮助：

$( 'body' ).bind( 'touchstart click', function(event) {

    console.log( 'Touched' );    
    setTimeout( function(){

        $( '#screensaver_warning_button' ).trigger( 'click' );
        setTimeout(function(){
            $( '#screensaver' ).show();
        }, 5000);
    }, 5000);
});

PS：你应该启动你的屏幕保护程序，当时间不在它的时间总是在运行

创建一个带有延迟和警告消息的jQuery屏幕保护程序

1 个答案: