0

我正在尝试这样做，每当我的页面“test.php”加载时，只要用户点击我的功能就会启动#start

当用户离开广告（例如到另一个选项卡）时，该功能将停止。（在职的）

每当用户返回选项卡 (test.php) 时，该函数应该重新启动。我似乎找不到该怎么做..目前我有这个：

  $("body").on('click', '#start', function()
                    {
                        $('#website').focus();
                        $('.message').html('<div class="alert info"><b id="seconds">'+parseFloat($seconds-$current_second)+'</b> seconds remaining.</div>');
                        if($timer !== null) return;
                        $timer = setInterval(function()
                        {
                            if($current_second==$seconds)
                            {
                                clearInterval($timer);
                                $('body').addClass('done');
                                $('.message').html('<div class="alert info">Validating advertisement&hellip;</div>');

                                $.post('index.php?i=v&p=k&token=' + token,{'key': key,'token':token,'time':time,'stime':stime},
                                        function (data) {
                                            proccessData(data);
                                        });
                                return false;
                            }
                            else
                            {
                                var $counter_bar_width = $('#bar').innerWidth();


                                //$('#bar').css('width',parseFloat($counter_bar_width+$width_per_second).toFixed(2));
                                var left = (<?php echo $time; ?>-$current_second)*1000;
                                $current_second++;
                                $("#seconds").text(parseFloat($seconds-$current_second));
                                $('#bar').animate({
                                width:'100%'
                                }, left);   


                            }
                        },1000); 
                    });


                    var vis = (function(){
                        var stateKey, eventKey, keys = {
                            hidden: "visibilitychange",
                            webkitHidden: "webkitvisibilitychange",
                            mozHidden: "mozvisibilitychange",
                            msHidden: "msvisibilitychange"
                        };
                        for (stateKey in keys) {
                            if (stateKey in document) {
                                eventKey = keys[stateKey];
                                break;
                            }
                        }
                        return function(c) {
                            if (c) document.addEventListener(eventKey, c);
                            return !document[stateKey];
                        }
                    })();


                        var handler = function(){ 
                          // calling vis() with no arguments will return a boolean


                          if (vis()) {
                            //Visible.
    Page tab is now visible. Now the timer and the bar should start moving / counting down again.


                          } else {
                            //Not visible.                      
                            var myDiv = $("#bar");
                            myDiv.clearQueue();
                            myDiv.stop();   
                            clearInterval($timer);
                            $timer = null
                          }
                        }

                        // if a handler is passed, it gets bound to the event
                        vis(handler);       
                    });
4

1 回答 1

0

如果我理解正确，您需要在用户位于您的选项卡上时绑定单击处理程序，并在他们导航到另一个选项卡时取消绑定。

$(window).focus(function() {
    bindClick();
});

$(window).blur(function() {
    unBindClick();
});

function bindClick()
{
    $('#start').on('click.tester', function(e){
        // Do your stuff here
    })
}

function unBindClick()
{
    $('#start').unbind('click.tester');
}

当窗口获得焦点（您的选项卡处于活动状态）时，这将为 #start 上的单击事件绑定一个事件侦听器，并将取消绑定相同的事件侦听器（click 关键字前面的 .tester 位确保您取消绑定正确的侦听器)

防止需要绑定/重新绑定的另一个选项是绑定单击侦听器一次，并且仅在某些情况为真时才执行任何操作（在这种情况下，如果窗口具有焦点）

$('#start').on('click', function(e){

    // This currently tests for browser focus, but could test for just about anything
    if (document.hasFocus()) {
        // Do your stuff here
    }
});

或者，如果您想在某处保存状态，您可以绑定单击事件侦听器，并通过窗口焦点和模糊事件暂停/恢复其功能。如果你要走这条路，在一个中心对象中维护绑定和状态可能是有意义的。

$('#start').on('click', function(e){

    $(window).blur(function(e){
        // Pause functionality

    }).focus(function(e){
        // Regain functionality

    });

    // Do Stuff (probably need to save state somewhere)

});
于 2013-10-23T19:43:21.863 回答