Question

我想这样做，每当我的页面“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);       
                    });

Answer 1

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

$(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上的单击事件的事件侦听器，并取消绑定相同的事件侦听器（单击关键字前面的.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
    }
});

或者，如果您想在某处保存状态，可以绑定click事件侦听器，并使用window focus和blur事件暂停/恢复它的功能。如果你要走这条路线，那么在一个中心对象中保持绑定和状态可能是有意义的。

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

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

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

    });

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

});

再次自动启动功能

1 个答案: