2015-04-07 5 views
0

Я запускаю всплывающее окно, если пользователь неактивен на странице, но хочет, чтобы функция, отображающая всплывающее окно, удаляется, если пользователь закрывает всплывающее окно, так как это просто раздражает наличие этого pop открыть каждые XX секунд.Как я могу удалить эту функцию setTimeout

Это функция, которую я использую для вызова всплывающего окна.

<script type="text/javascript"> 
var timeoutID; 

function setup() { 
    this.addEventListener("mousemove", resetTimer, false); 
    this.addEventListener("mousedown", resetTimer, false); 
    this.addEventListener("keypress", resetTimer, false); 
    this.addEventListener("DOMMouseScroll", resetTimer, false); 
    this.addEventListener("mousewheel", resetTimer, false); 
    this.addEventListener("touchmove", resetTimer, false); 
    this.addEventListener("MSPointerMove", resetTimer, false); 

    startTimer(); 
} 
setup(); 

function startTimer() { 
    // wait 20 seconds before calling goInactive 
    timeoutID = window.setTimeout(goInactive, 20000); 
} 

function resetTimer(e) { 
    window.clearTimeout(timeoutID); 

    goActive(); 
} 


function goActive() {   
    startTimer(); 
} 

function goInactive() { 
    $.magnificPopup.open({ 
     mainClass: "mfp-fade", 
     fixedContentPos: false, 
     fixedBgPos: true, 
     items: { 
      src: "#needtochat" 
     }, 
     removalDelay: 1000, //delay removal by X to allow out-animation 
      callbacks: { 
      beforeOpen: function() { 
       this.st.mainClass = "mfp-3d-unfold"; 
      }, 
      close: function() { 
       window.clearTimeout(timeoutID); // Thought this may remove the timer function all together? 
      } 
      }, 
     type: "inline"}, 0); 
} 

</script> 

Вы заметите function goInactive() показывает модальное окно и у меня есть обратный вызов close:, что я надеялся, очистить функцию.

+0

Это вполне может быть очистка таймера, но у вас есть куча слушателей событий который будет воссоздавать его с помощью 'resetTimer' ->' goActive' -> 'startTimer' –

+0

Итак, ответ будет? – Aaron

+0

Вы должны установить флаг в начале функции 'goInactive()', поэтому ** прекратите выполнение функции 'goActive()' внутри 'resetTimer()' **. Что происходит сейчас: вы очищаете тайм-аут, но вы устанавливаете его снова в самый следующий момент (используя вышеупомянутые прослушиватели событий). – skobaljic

ответ

1

Предполагая, что обратный вызов close будет рекламироваться, тайм-аут будет очищен. Тем не менее, вы подключили несколько прослушивателей событий, которые немедленно воссоздают таймаут, как только что-то произойдет. Здесь есть два варианта.

Вариант 1: Удаление обработчиков событий, в дополнение к очистке таймера:

function teardown() { 
    this.removeEventListener("mousemove", resetTimer); 
    this.removeEventListener("mousedown", resetTimer); 
    this.removeEventListener("keypress", resetTimer); 
    this.removeEventListener("DOMMouseScroll", resetTimer); 
    this.removeEventListener("mousewheel", resetTimer); 
    this.removeEventListener("touchmove", resetTimer); 
    this.removeEventListener("MSPointerMove", resetTimer); 
} 

и внутри close обработчика:

close: function() { 
    teardown(); 
    window.clearTimeout(timeoutID); 
} 

Вариант 2: Создать флаг и использовать его для контроля создание таймера:

var popupClosed = false; 

function resetTimer(e) { 
    window.clearTimeout(timeoutID); 
    if (!popupClosed) 
     goActive(); 
} 

И установить это с помощью п close обработчик:

close: function() { 
    popupClosed = true; 
    window.clearTimeout(timeoutID); 
} 
+0

Спасибо, что именно он говорит на олове! – Aaron

0

Как я понимаю, вы можете добавить переменную, например:

var popupBeenClosed = false; 

изменить его верно в «тесном» обратного вызова, а также добавить проверку в resetTimer ():

function resetTimer(e) { 

    if (!popupBeenClosed) { 

     window.clearTimeout(timeoutID); 
     goActive(); 
    } 

}

Смежные вопросы