web-dev-qa-db-ja.com

jQuery-clearIntervalでsetIntervalを強制終了した後、setIntervalを再起動する方法は？

「STAY」と「Leave」の2つのボタンでページを作成したい。ボタンの下にiFrameがあります。ページが初めて読み込まれると、iFrameは10秒後に自動的に更新を開始します。ユーザーがSTAYボタンを押すと、更新が停止します。その後、LEAVEボタンを押すと、iFrameは10秒後に再び更新を開始します。私はこのコードを使用しています：

$(document).ready(function() {
    var refreshIntervalId = setInterval( "update()", 10000 );

    $('#leave').click(function () {
        var refreshIntervalId = setInterval( "update()", 10000 );;
    })

    $('#stay').click(function () {
        clearInterval(refreshIntervalId);
    })
});

function update(){
    var url = "load.php";
    $('iframe#ifrm').attr('src', url);
}

<div id="bar">
    <div class= "button" id="stay">
    <a>Stay</a>
    </div>
    <div class= "button" id="leave">
    <a>Leave</a>
    </div>
</div>

しかし、それは機能しません、私はclearIntervalを間違った方法で使用していますか？

javascriptjquerysetinterval
12
Pritesh Desai

設定した間隔IDを関数スコープ外にプルする必要があると思います。

var refreshIntervalId;
$('#leave').click(function () {
        refreshIntervalId = setInterval( update, 10000 );
        })
$('#stay').click(function () {
           clearInterval(refreshIntervalId);
        })
});

たぶん、refreshIntervalId変数の検証チェックも...

if(refreshIntervalId!=null){
   // Do something with the interval id
}
12
rcravens

まず、#leaveクリック関数で変数を定義して、#stayクリック関数で使用することはできません。

次のように使用します。

var refreshIntervalId = null;

$('#leave').click(function () {
    refreshIntervalId = setInterval( "update()", 10000 );
})
$('#stay').click(function () {
   clearInterval(refreshIntervalId);
})
1
Yoram de Langen

これはスコープの問題です。つまり、「var」をどこに置いても、どの関数が変数にアクセスできるかが定義されます。 Trickerの例のように、すべての関数の外部で変数を定義すると、ドキュメント内のすべての関数がその値にアクセスできます。

以前に投稿されたトリッカーの例：

var refreshIntervalId = null;

$('#leave').click(function () {
    refreshIntervalId = setInterval( "update()", 10000 );
})
$('#stay').click(function () {
   clearInterval(refreshIntervalId);
})

ドキュメント全体が変数にアクセスする必要がない場合があるため、関数内に配置する必要があります。

1
IttyBittyArtist