Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.05.2013, 20:47
Аспирант
Отправить личное сообщение для зверек Посмотреть профиль Найти все сообщения от зверек
 
Регистрация: 18.06.2009
Сообщений: 88

при скроллинге событие повторяется много раз
у меня при скроллинге происходит аякс запрос подгрузки данных. Вообще-то данные на страницу подгружаются один раз, однако firebug показывает несколько запросов и ответов. Сервер дергается, напрягается... Хотелось бы избавить его от лишней работы. Как это сделать?
Например на таком упрощенном скрипте
$(window).scroll(function(){ alert('тра-та-та')});
Ответить с цитированием
  #2 (permalink)  
Старый 06.05.2013, 23:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,024

зверек,
Возможный вариант решения ...
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
  height: 1000px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery.fn.scrollComplete = function(fn, ms)
	{
	var timer = null;
	this.scroll(function()
		{
		if (timer)
			{
			clearTimeout(timer);
			}
		timer = setTimeout(fn,ms);
		});
	}
$(window).scrollComplete(function(){alert('тра-та-та')}, 500);
</script>
</head>
<body>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 07.05.2013, 14:56
Аспирант
Отправить личное сообщение для зверек Посмотреть профиль Найти все сообщения от зверек
 
Регистрация: 18.06.2009
Сообщений: 88

работает, спасибо!
А как преобразовать этот скрипт так, чтобы задержка возникла после первого события. То есть тронули скоролл - событие возникло, а дальше задержка, чтобы избежать повторов.
Ответить с цитированием
  #4 (permalink)  
Старый 07.05.2013, 16:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,024

зверек,
Сообщение от зверек
Вообще-то данные на страницу подгружаются один раз
если нужно подгружать только один раз, можно использовать one
Вариант для ...
Сообщение от зверек
То есть тронули скоролл - событие возникло, а дальше задержка
<!DOCTYPE HTML>
<html>

    <head>
        <title>Untitled</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {
                height: 300px;
                padding: 50%
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            jQuery.fn.scrollComplete = function (fn, ms) {
                var timer = null,
                    marker = true;
                this.scroll(function () {
                    if (marker) {
                        marker = false;
                        fn()
                    }
                    if (timer) {
                        clearTimeout(timer);
                    }
                    timer = setTimeout(function () {
                        marker = true;
                        $("body").html("можно снова")
                    }, ms);
                });
            }
            $(window).scrollComplete(function () {
                $("body").html("событие возникло, пауза")
            }, 500);
        </script>
    </head>

    <body></body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 07.05.2013, 17:13
Аспирант
Отправить личное сообщение для зверек Посмотреть профиль Найти все сообщения от зверек
 
Регистрация: 18.06.2009
Сообщений: 88

Этот скрипт как-то не так работает. происходит вот что: юзер скролит до конца окна, до момента, когда должна происходить очередная подгрузка данных, а потом вместо действия (подгрузки данных) настает пауза. Если юзер проскролит немного вверх (ниже уже некуда), начнется подгрузка данных.

когда я говорил, что подгрузка данных происходит всего один раз, я имел в виду, что при скролинге до конца окна firebug показывает несколько одинаковых запросов к серверу и ответов от него, а данные грузит только один раз (берет один ответ), как и положено. При скролинге у меня подгружаются строки таблицы и по идее подгружаемые строки должны дублироваться (как дублируется тот самый алерт в самом первом моем сообщении). Однако дубляжа не происходит. Хорошо, что не происходит, конечно. Все работает как надо, но не понятно почему
а..ну вот пока писал, понял вроде почему...
Осталось только с паузой разобраться...

Последний раз редактировалось зверек, 07.05.2013 в 17:24.
Ответить с цитированием
  #6 (permalink)  
Старый 07.05.2013, 17:20
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

так есть же кучка готовых решений, возьмите первое попавшееся и посмотрите как другие делают
Ответить с цитированием
  #7 (permalink)  
Старый 07.05.2013, 17:31
Аспирант
Отправить личное сообщение для зверек Посмотреть профиль Найти все сообщения от зверек
 
Регистрация: 18.06.2009
Сообщений: 88

где эта куча? Что именно искать?
Ответить с цитированием
  #8 (permalink)  
Старый 07.05.2013, 17:35
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

http://www.jquery4u.com/tutorials/jq...rolling-demos/
Ответить с цитированием
  #9 (permalink)  
Старый 07.05.2013, 17:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,024

Сообщение от зверек
юзер скролит до конца окна
новый момент ))) так и измеряйте при скролинге величину прокрутки -- достигли конца страницы -- сделили аякс запрос, выставили запрет/маркер -- пришёл ответ с сервера - разблокировал маркер- снова меряем достиг ли скролинг конца страницы.
Ответить с цитированием
  #10 (permalink)  
Старый 08.05.2013, 18:09
Аспирант
Отправить личное сообщение для зверек Посмотреть профиль Найти все сообщения от зверек
 
Регистрация: 18.06.2009
Сообщений: 88

вобщем счас так:

$(window).scroll(function(){ 
if ($(document).height() - $(window).height() <= $(window).scrollTop()) 
	{ аякс}
})

все прекрасно работает.
Но как только я делаю вот так
if ($(document).height() - $(window).height() <= $(window).scrollTop()) +300

чтобы подгрузка данных началась чуть раньше и была менее заметна для юзера, то как раз получаются дубляжные запросы к серверу.
и чего-то я не могу пока понять, как это исправить...

animhotep, мне кажется не совсем продуктивным ставить плагин, когда дело-то в паре строк кода.

Последний раз редактировалось зверек, 08.05.2013 в 18:17.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Событие при наведении мышкой на фото ssh Общие вопросы Javascript 2 16.11.2009 21:25
Событие при нажатии на ССЫЛКУ Ivanishin Events/DOM/Window 11 16.06.2009 00:43
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 21:05
Не отрабатывает событие onmouseout при внедрении нового слоя ilshat Элементы интерфейса 3 28.07.2008 05:27