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。あなたが実際に取り組んでいる要素がselect本物の出来事を伴う や何かのようなものである場合は、の代わりにchange固執してください。は非推奨であり、完全に削除される前にこれ以上のバージョンはおそらくないでしょう。$.on$.live$.live

また、 ;を使用できるように切り替えまし$.loadた。jsFiddle は、何かを操作して返すオプションを実際には与えてくれません。そのため、代わりにログステートメントを使用して置き換えました。$.getcallback$.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そのスコープにのみ属します。Likeは、そのハンドラvar select = $(this);内でのみアクセスできます。$.on

したがって、var newval;簡単に共有できるように、その最上位に最もプライベートなスコープが必要です。もちろん、そのスコープまですべてを押し込みたくない場合があるため、注意する必要があります（ のようにvar select）。

おそらく、残りの部分は自明です。は必要ありませwindow.setTimeoutんsetTimeout。ほとんどのwindowスコープのプロパティとメソッドでは、先頭に を追加する必要はありませんwindow。ただし、スコープ内windowに local がある場合など、 local と global/ プロパティのあいまいさを解消するために、そうする必要がある場合があります。その場合はそれを取得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 に答える