javascript - 突出显示新事件的选项卡

Question

我正在使用一个函数，通过下面的代码更改标题，并且只要窗口处于焦点状态，它就必须停止更改。

//Set to true on first load
var window_focus = true;
$(window).focus(function () {
    return window_focus = true;
})
        .blur(function () {
            return window_focus = false;
        });
// THE CHANGE FUNCTION
function doHighlightNow (){
    var highlightTimer = null;
    var oldTitle = document.title;


    function doHighlight() {
        if (window_focus){
            stopHighlight();
        }

        var doBlink = function() {
            document.title = "Title one"

            setTimeout(function(){
                document.title = "Title two";
            }, 1000);
        }
        doBlink();
    }

    function stopHighlight() {
        document.title = 'stopped';
        clearInterval(highlightTimer);  
    }
    highlightTimer = setInterval(function(){doHighlight(nickname) }, 2500); 
}

现在，每次触发 doHightlightNow() 且 windows_focus 不 true 时，标题都会更改，否则会清除间隔。

现在我想让它在窗口再次获得焦点时直接触发 stopHighlight() ，如果触发 doHighlightNow() ，最好的解决方案是什么.

我现在一定是这样的，

$(窗口).on("点击", "焦点",function(){ 触发 stopHighlightnow(); });

但是我不知道如何提供这个，我希望有人可以帮助我。

Answer 1

你能做的是，

var highlightTimer = null; // Create it outside the function 
                           // So you can stop it outside the function
function doHighlightNow (){
    var oldTitle = document.title;

function doHighlight() {
    //No need for this inside the function
    //if (window_focus){
        //stopHighlight();
    //}

    var doBlink = function() {
        document.title = "Title one"

        setTimeout(function(){
            document.title = "Title two";
        }, 1000);
    }
    doBlink();
}
// Neither need this anymore inside the function
//function stopHighlight() {
    //document.title = 'stopped';
    //clearInterval(highlightTimer);  
//}
highlightTimer = setInterval(function(){doHighlight(nickname) }, 2500); 
}

    $(window).on("focus", function(){
        if (window_focus){
            document.title = 'stopped';
            clearInterval(highlightTimer);  
        }
    });