Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.09.2019, 10:17
Интересующийся
Отправить личное сообщение для imhateb Посмотреть профиль Найти все сообщения от imhateb
 
Регистрация: 16.09.2013
Сообщений: 28

Возобновление интервала после остановки
Здравствуйте.

Есть на странице листалка блоков с интервалом и по клику на кнопки. Было желание, чтобы автопролистывание останавливалось при наведении, и когда блок уходит из области видимости. Это удалось реализовать. А вот что не получилось - так это сделать, чтобы автопролистывание автоматически возобновлялось при возвращении блока в область видимости.

Вот собственно сайт - http://labm.format23.ru, и речь идёт о самом верхнем блоке с большими фоновыми изображениями.

Вот код
var interval, timer = 7300;

function startInterval() {
    interval = setInterval(function(){   
        animate_bar();
        var act_id = parseInt($('.sidebar .paginator div.act_pagi').attr('id').replace(/\D+/g,""));
        var pagi = $('#sb_paginator div').length;
        if (act_id < pagi) {act_id++} else {act_id = 1};            
        pagination(act_id);        
    },timer);
};

function animate_bar() {$('.progress_bar span').animate({width: "100%"},timer, function(){$(this).css("width", "0px");});};

function stopInterval() {clearInterval(interval); $('.progress_bar span').stop().css('width', '0px');}

function paginator() {    
    $('.sidebar .paginator div').click(function(){
        if(!$(this).hasClass('act_pagi')) {
            var act_id = parseInt($(this).attr('id').replace(/\D+/g,""));            
            pagination(act_id);
        }
    });
    $('.sidebar').mouseenter(function(){stopInterval();}); // остановка автоматического перелистывания при наведении мышки
    $('.sidebar').mouseleave(function(){startInterval();animate_bar();}); // запуск автоматического перелистывания когда наведения мышки нет
}

function pagination(act_id) {
    $('.sidebar .paginator div').removeClass('act_pagi');
    $('.sidebar .paginator div#sb_p'+act_id).addClass('act_pagi');
    $('.sb_content').removeClass('show');
    $('.sb_content#sb'+act_id).addClass('show');
    $('.section1 .back').removeClass('show');   
    $('.section1 .back#back'+act_id).addClass('show');   
};

Вот собственно запуск
$(document).ready(function() {    
    //Sidebar pagination
    if ($('div').is('.sidebar')) {
        paginator();  
        animate_bar();
        startInterval();
    }
});

Функция viewport()
function viewport(elem) {
    var win_h = window.innerHeight,
        scrol = $(document).scrollTop(),
        elem_h = elem.height(),
        elem_t = elem.offset().top;
    
    if (scrol+win_h >= elem_t && scrol <= elem_t+elem_h) {return ("visible");} else {return ("no");} 
}

Реакция на viewport()
$(document).on('scroll', function () {    
    if ($('div').is('.sidebar')) {if (viewport($('.section1')) != 'visible') {stopInterval();}}
});

Вот так работает всё:
- при загрузке страницы запускается автопролистывание;
- работает нажатие по кнопкам;
- автопролистывание останавливается при наведении на сайдбар;
- останавливается, когда блок уходит из области видимости при скролле.
- запускается снова когда мышка уходит с сайдбара.
Но при возвращении блока в область видимости автопролистывание снова не запускается.
Потому что, если я пишу вот так:
$(document).on('scroll', function () {    
    if ($('div').is('.sidebar')) {
        if (viewport($('.section1')) != 'visible') {stopInterval();}
        else {startInterval();}
    }
});

Получается какая-то фигня неописуемая.

Что я делаю не так?

P.S. И ещё заметил, что если страница какое-то время открыта в фоне (в соседней вкладке), то вся эта конструкция начинает как-то странно работать: анимированная полоска начинает жить своей жизнью, и не реагирует на наведения мыши на сайдбар. Точнее она как ms останавливается на секунду, а потом прёт дальше, хотя должна обнуляться и начинать свой путь сначала.
Вот тут я вообще не понимаю что происходит.
Ответить с цитированием
  #2 (permalink)  
Старый 26.09.2019, 10:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,973

imhateb,
$(document).on('scroll', function () {
   if ($('div').is('.sidebar')) {
        stopInterval();
        if (viewport($('.section1')) == 'visible') startInterval();
    }
});
Ответить с цитированием
  #3 (permalink)  
Старый 26.09.2019, 10:54
Интересующийся
Отправить личное сообщение для imhateb Посмотреть профиль Найти все сообщения от imhateb
 
Регистрация: 16.09.2013
Сообщений: 28

Сообщение от рони Посмотреть сообщение
imhateb,
$(document).on('scroll', function () {
   if ($('div').is('.sidebar')) {
        stopInterval();
        if (viewport($('.section1')) == 'visible') startInterval();
    }
});
Неа, не работает ((
Останавливаться останавливается, но так и не запускается при возвращении в область видимости.
Ответить с цитированием
  #4 (permalink)  
Старый 29.09.2019, 00:52
Интересующийся
Отправить личное сообщение для imhateb Посмотреть профиль Найти все сообщения от imhateb
 
Регистрация: 16.09.2013
Сообщений: 28

Сообщение от imhateb Посмотреть сообщение
Неа, не работает ((
Останавливаться останавливается, но так и не запускается при возвращении в область видимости.

Ошибка была в написании самой функции. Надо было сделать вот так:

function paginator() {    
    $('.sidebar .paginator div').click(function(){
        if(!$(this).hasClass('act_pagi')) {
            var act_id = parseInt($(this).attr('id').replace(/\D+/g,""));            
            pagination(act_id);
        }
    });
    $('.sidebar').mouseenter(function(){stopInterval();}); // остановка автоматического перелистывания при наведении мышки
    $('.sidebar').mouseleave(function(){startInterval();animate_bar();}); // запуск автоматического перелистывания когда наведения мышки нет
    
    animate_bar();
    startInterval();
}

var interval, timer = 7300;

function startInterval() {
    interval = setInterval(function(){   
        animate_bar();
        var act_id = parseInt($('.sidebar .paginator div.act_pagi').attr('id').replace(/\D+/g,""));
        var pagi = $('#sb_paginator div').length;
        if (act_id < pagi) {act_id++} else {act_id = 1};            
        pagination(act_id);        
    },timer);
};


function pagination(act_id) {
    $('.sidebar .paginator div').removeClass('act_pagi');
    $('.sidebar .paginator div#sb_p'+act_id).addClass('act_pagi');
    $('.sb_content').removeClass('show');
    $('.sb_content#sb'+act_id).addClass('show');
    $('.section1 .back').removeClass('show');   
    $('.section1 .back#back'+act_id).addClass('show');   
};

function stopInterval() {clearInterval(interval); $('.progress_bar span').stop().css('width', '0px');}
function animate_bar() {$('.progress_bar span').animate({width: "100%"},timer, function(){$(this).css("width", "0px");});};


И запускать только paginator()
$(document).ready(function() {
    if ($('div').is('.sidebar')) {paginator();}
});

$(document).on('scroll', function () {    
    if ($('div').is('.sidebar')) {stopInterval(); if (viewport($('.section1')) == 'visible') paginator();}
});


Всем спасибо за помощь ))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрыть ссылку/кнопку после нажатия. Ares Общие вопросы Javascript 1 22.10.2015 09:53
Вызов функции после остановки ресайзинга Siend jQuery 6 03.09.2015 12:56
Сохранение данных после закрытия страницы HekracoB AJAX и COMET 12 02.01.2015 11:41
Ссылка обрабатывается/отображается после обновления страницы Kimtom Общие вопросы Javascript 3 14.04.2014 14:03
Повернуть изображение после его загрузки (jquery) art_maestro jQuery 0 13.09.2012 20:50