it-swarm-ru.tech

jQuery - Как перезапустить setInterval после его уничтожения с помощью clearInterval?

Я хочу создать страницу с 2 кнопками "STAY" и "Leave". Под кнопками находится 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 неправильно?

11
Pritesh Desai

Я думаю, вам нужно вытащить установленный идентификатор интервала за пределы области действия функции.

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", он определяет, какие функции имеют доступ к переменной. Если вы определяете переменную вне всех функций, как в примере с Трикером, любая функция в вашем документе имеет доступ к этому значению.

Пример Трикера, ранее опубликованный:

var refreshIntervalId = null;

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

Иногда весь документ не должен иметь доступа к переменной, поэтому вы хотите поместить его в функцию.

1
IttyBittyArtist