1

我有一个计时器功能，我从这个网站上下来，并尝试对其进行一些修改以满足我的需要。在大多数情况下，它可以按我的意愿工作，但我无法将参数传递给 JavaScript 函数。

我想使用选择来更改 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.

    }
  });
});
4

3 回答 3

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; 如果您在现实中使用的元素类似于 aselect或具有真实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;

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

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

可能其余部分是不言自明的。你不需要window.setTimeout，只要setTimeout。大多数window范围的属性和方法不需要您预先添加window. 但是，您可能需要这样做以消除本地和全局/window属性的歧义，例如，如果您有一个本地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，但我认为它不相关，所以我把它省略了。

于 2012-09-30T06:08:29.950 回答
0

好吧，你可以这样做：

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

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

$('#id').load('load.asp?id=' + window.newVal);
于 2012-09-30T05:06:36.510 回答
0

试试这个

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);
于 2012-09-30T05:08:58.600 回答