2011-01-20 3 views
1

Привет, ребята, я не знаю, как это сделать - например, где поставить if .. У меня есть div, который загружает страницу и имеет функцию setInterval().JQuery auto refresh (setInterval)

На загруженной странице есть 1 кнопка. То, что я хочу получить, - это когда нажата кнопка № 1 (загруженная страница), чтобы остановить setInterval() и добавить новый div (абсолютная позиция) до тех пор, пока кнопка № 2 (вкл. а затем активируется div), чтобы перезапустить его. .. содержать?

Вот мой «базовый» код

Это действие с первой кнопки

$('.replybutton').live('click',function(){ 
    $('.discussion').append('<div class="replyarea">some content in here plus "button number2</div>'); 
    }); 

Это загружает страницу - сначала

$('.discussion').load('board2.php'); 

И это функция обновления

var auto_refresh = setInterval(
function() 
    { 
    $('.discussion').fadeOut().load('board2.php').fadeIn(); 

    }, 10000); 

Не удалось ничего (но не рекомендуется) Я мог бы использовать переключатель на загруженной странице, а не append, используемый в $('.replybutton').live('click',function(), но все равно нужно остановить обновление и перезапустить его - на основе переключения, но я подчеркиваю идею переключения не является предпочтительным способом.

ответ

1

я создал пример для вас в JSFiddle. Посмотрите здесь: http://jsfiddle.net/7YYV7/.

Код

var intervalId = 0; 
intervalId = setInterval(fadeDiscussion, 3000); 

$(function() { 
    $('input[name=click]').bind('click', function() { 
     clearInterval(intervalId);  

     $('.discussion').append('<div class="replyarea">some content in here plus <input type="button" name="save" value="save"></div>');  
    }); 

    $('input[name=save]').live('click', function() { 
     intervalId = setInterval(fadeDiscussion, 3000); 
    }); 
}); 

var i = 1; 
function fadeDiscussion() { 
    console.log(i); 
    $('.discussion').fadeOut().fadeIn(); 
    i++; 
} 
1

Я думаю, что вы ищете функцию clearInterval(). Это позволит вам удалить ваш интервал на основе идентификатора интервала (в вашем случае auto_refresh).

Вот документы: https://developer.mozilla.org/en/DOM/window.clearInterval

Теперь вы можете обернуть вы обратный вызов в имени функции:

var reload = function(){ 
    $('.discussion').fadeOut().load('board2.php').fadeIn(); 
}; 

var auto_refresh = setInterval(reload, 10000); 

$('button').click(function(){ 
    clearInterval(auto_refresh); 
});