javascript - 如何从 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并替换为日志语句。

好的，您将看到一个包装 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;

这些都是私有(private)变量，将保留在属于该范围的函数和回调的范围内。因此，如果我将它们放在“最私密”的范围内，我们就可以共享它们。如果用 var 调用他们在该作用域内的其他函数内部，它们仅属于该作用域。喜欢var select = $(this);只能在$.on内访问处理程序。

因此，我想要var newval;在最顶层的私有(private)范围内，因此我们可以轻松共享它。当然，您必须小心，因为有时您不想将其全部推到该范围(例如 var select )。

其余部分可能是不言自明的。你不需要window.setTimeout ，只是setTimeout 。最window -作用域属性和方法不需要您在前面添加 window 。但是，您可能需要这样做来消除本地和全局/window 的歧义。属性(property)，例如，如果您有本地 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，但我认为它不相关，所以我把它省略了。