如何從setTimeout中獲取另一個作用域中的變量集？

Question

我有一個計時器功能，我離開了這個網站，並嘗試對其進行一些修改以滿足我的需要。 在大多數情況下，它可以按我的意願工作，但是我無法將參數傳遞給JavaScript函數。

我想使用select來更改id值，然后將該值傳遞到JQuery加載函數中。 有人可以告訴我該怎么做嗎？

值得一提的是，當計時器刷新時，選擇值需要“固定”，不能重置。

這是我到目前為止的內容：

function RecurringTimer(callback, delay) {
  var timerId, start, remaining = delay;

  this.pause = function() {
    window.clearTimeout(timerId);
    remaining -= new Date() - start;
  };

  var resume = function() {
    start = new Date();
    timerId = window.setTimeout(function() {
      remaining = delay;
      resume();
      callback();
    },remaining);
  };

  this.resume = resume;
  this.resume();
}

var timer = new RecurringTimer(function() {
  $('#id').load('load.asp?id=1'); // The "id" should be "newVal" from JQuery below.
}, 5000);


$(document).ready(function(){
  $('#appList').live('change',function(){
    var select = $(this);
    var newVal = select.val();

    if(newVal != ''){

      // This is where the var newVal needs to be passed into the JavaScript.

    }
  });
});

Answer 1

我已經在某種程度上推測了您的工作狀況，因此我做了一些更改以適應嘗試使其工作的需要。 因此，如果您對我為什么要做的事情有任何疑問，請告訴我。

這是我的模擬元素，試圖匹配代碼中的內容：

<div id="selector">
    <select id="appList">
        <option value="1">Application List - App 1</option>
        <option value="2">Application List - App 2</option>
        <option value="3">Application List - App 3</option>
        <option value="4">Application List - App 4</option>
    </select>
</div>
<div id="id"></div>

請注意， #id並不是元素的良好標識符; 我幾乎幾次將其重命名為#loader 。 您可以考慮使此元素的id屬性更具描述性。

我確實將$.live更改為$.on ; 如果您實際上使用的元素是select或發生真正change事件的東西，請堅持使用$.on而不是$.live 。 $.live已被棄用，在完全刪除之前可能不會有太多版本。

我也將$.load換成$.get這樣我就可以使用callback ； jsFiddle並沒有真正讓我選擇使用$.load並返回任何東西。 因此，我使用$.get代替了一條log語句。

好的，所以您將看到包裝的jQuery(); 圍繞所有RecurringTimer()函數以及callback ， timer和$.on 。 這樣做是創建一個“關閉范圍”（想像它包含了其中包含的代碼），所以我不再處於window范圍或全局范圍內。 我可以訪問window通過調用window ，但是this將屬於jQuery.ready()這意味着document 。

在頂部，您將看到：

jQuery(function run($){
    var $id = $('#id'),
        $applist = $('#appList'),
        timerId,
        start,
        remaining = 0,
        newval,
        select;

這些都是私有變量，將保留在該作用域的函數和屬於該作用域的回調中。 因此，如果我在“最私密的”范圍內擁有它們，我們可以共享它們。 如果在此范圍內的其他函數內部使用var調用它們，則它們將僅屬於該范圍。 就像var select = $(this); 只能在該$.on處理程序中訪問。

因此，我想要var newval; 在最私人的范圍內，因此我們可以輕松共享它。 當然，您必須要小心，因為有時您不想將其全部推到那個范圍內（例如var select ）。

其余部分可能是不言自明的。 您不需要window.setTimeout ，只需要setTimeout 。 大多數window范圍的屬性和方法不需要您在window 。 但是，您可能需要這樣做以消除local和global / window屬性的歧義，例如，如果您具有local var location = 'http://...'; 在適用范圍。 在這種情況下，您需要window.location來實現。

如果您有任何疑問，請告訴我。

jQuery(function run($){
    var $id = $('#id'),
        $applist = $('#appList'),
        timerId,
        start,
        remaining = 0,
        newval,
        select;

    $applist.on('change', function(){
        var select = $(this);

        $id.prepend('<p>App List change event fired</p>');

        newval = select.val();

        if (newval != '') {
            var timer = new RecurringTimer(function() {
                $.get('/echo/html/?id=' + newval, callback); 
            }, 5000);
        }

        function callback(msg, status){
            var report = '<p>Callback returned ' + status + 
                         ' for '  + this.url +  '.</p>';

            $id.prepend(report);
        }
    });

    function RecurringTimer(callback, delay) {
        remaining = delay;

        $id.prepend('<p>RecurringTimer initialized.</p>');

        this.pause = function() {
            clearTimeout(timerId);

            remaining -= new Date() - start;
        };

        var resume = function() {
            start = new Date();

            timerId = setTimeout(function() {
                remaining = delay;
                resume();
                callback();
            }, remaining);
        };

        this.resume = resume;

        this.resume();
    }
});

http://jsfiddle.net/userdude/zU5b3/

也有一些CSS，但是我認為它不相關，因此我將其省略。

Answer 2

好吧，你可以這樣做：

if(newVal != ''){
    window.newVal = newVal;
}

並在需要的地方使用window.newVal ：

$('#id').load('load.asp?id=' + window.newVal);

Answer 3

嘗試這個

function RecurringTimer(callback, delay) {
 var timerId, start, remaining = delay;
 var newValue;
  .....
  .....
  .....

然后在你的jQuery中

if(newVal != ''){

     newValue = newVal;

}

然后您可以在計時器中引用它

    var timer = new RecurringTimer(function() {

        $('#id').load('load.asp?id='+newValue); // The "id" should be "newVal" from JQuery below.
}, 5000);