模块内部的Javascript范围问题

Question

当在下面的代码中声明时，$sessionTimeLeft在updateSession()内部访问时未定义。但是当我在initiate()里面移动$sessionTimeLeft声明和赋值时，我得到了正确的jQuery对象。我想我可以访问$sessionTimeLeft当它在initiate()内由于关闭而被声明。但为什么$sessionTimeLeft超出我的原始代码范围？

var session = (function SessionManager() { 
    var timeLeftInMs; 
    var timeLeftInMin; 
    var delay; // in ms 
    var $sessionTimeLeft = $('#dcSessionTimeLeft'); 

    /* Set up the module by setting the timeout and delay time. */ 
    function initiate(_timeout, _delay) { 
    timeLeftInMin = _timeout; 
    timeLeftInMs = timeLeftInMin * 60 * 1000;  
    delay = _delay; // delay in ms  

    setInterval(updateSession, delay); 
    } 

    function updateSession() { 
    timeLeftInMs -= delay; 
    timeLeftInMin = timeLeftInMs/60000; // convert ms to min.    

    $sessionTimeLeft.text(timeLeftInMin); 
    } 

    var publicAPI = { 
    initiate: initiate 
    }; 

    return publicAPI; 
})(); 

session.initiate(30,1000); 

Answer 1

这里的问题是，当您尝试访问它时，#dcSessionTimeLeft可能尚未加载。因此，要确保在装入一个方法是来包装你的代码在一个document.ready：

$(function() { 
    var session = (function SessionManager() { 
    var timeLeftInMs; 
    var timeLeftInMin; 
    var delay; // in ms 
    var $sessionTimeLeft = $('#dcSessionTimeLeft'); 

    /* Set up the module by setting the timeout and delay time. */ 
    function initiate(_timeout, _delay) { 
    timeLeftInMin = _timeout; 
    timeLeftInMs = timeLeftInMin * 60 * 1000;  
    delay = _delay; // delay in ms  

    setInterval(updateSession, delay); 
    } 

    function updateSession() { 
    timeLeftInMs -= delay; 
    timeLeftInMin = timeLeftInMs/60000; // convert ms to min.    

    $sessionTimeLeft.text(timeLeftInMin); 
    } 

    var publicAPI = { 
    initiate: initiate 
    }; 

    return publicAPI; 
    })(); 

    session.initiate(30,1000); 
}); 

Answer 2

封闭在这种情况下也应该工作得很好。此代码不起作用的原因是因为您尚未正确调用会话功能。记住这个函数返回一个函数对象发起

最后的代码行应该是

session.initiate(30,1000); 

这应该工作。重现我使用节点的问题。我将$ sessionTimeLeft变量更改为字符串hello，并测试它是否仍然可以在updateSession函数中访问。我的代码是

var session = (function SessionManager() { 
    var timeLeftInMs; 
    var timeLeftInMin; 
    var delay; // in ms 
    var $sessionTimeLeft = "Hello"; 

    /* Set up the module by setting the timeout and delay time. */ 
    function initiate(_timeout, _delay) { 
    timeLeftInMin = _timeout; 
    timeLeftInMs = timeLeftInMin * 60 * 1000; 
    delay = _delay; // delay in ms 

    setInterval(updateSession, delay); 
    } 

    function updateSession() { 
    timeLeftInMs -= delay; 
    timeLeftInMin = timeLeftInMs/60000; // convert ms to min. 

    console.log($sessionTimeLeft); 
    } 

    var publicAPI = { 
    initiate: initiate 
    }; 

    return publicAPI; 
})(); 

session.initiate(30,1000); 

而且我得到的结果是

Hello 
Hello 
Hello 
Hello 
Hello 

各

每1秒。