Форум

зверек · #1 (**permalink**) 06.05.2013, 21:47

у меня при скроллинге происходит аякс запрос подгрузки данных. Вообще-то данные на страницу подгружаются один раз, однако firebug показывает несколько запросов и ответов. Сервер дергается, напрягается... Хотелось бы избавить его от лишней работы. Как это сделать?
Например на таком упрощенном скрипте

$(window).scroll(function(){ alert('тра-та-та')});

рони · #2 (**permalink**) 07.05.2013, 00:11

зверек,
Возможный вариант решения ...

<!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, 15:56

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

рони · #4 (**permalink**) 07.05.2013, 17:57

зверек,

Сообщение от зверек

Вообще-то данные на страницу подгружаются один раз

если нужно подгружать только один раз, можно использовать 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, 18:13

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

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

а..ну вот пока писал, понял вроде почему...
Осталось только с паузой разобраться...

animhotep · #6 (**permalink**) 07.05.2013, 18:20

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

зверек · #7 (**permalink**) 07.05.2013, 18:31

где эта куча?

Что именно искать?

animhotep · #8 (**permalink**) 07.05.2013, 18:35

http://www.jquery4u.com/tutorials/jq...rolling-demos/

рони · #9 (**permalink**) 07.05.2013, 18:43

Сообщение от зверек

юзер скролит до конца окна

новый момент ))) так и измеряйте при скролинге величину прокрутки -- достигли конца страницы -- сделили аякс запрос, выставили запрет/маркер -- пришёл ответ с сервера - разблокировал маркер- снова меряем достиг ли скролинг конца страницы.

зверек · #10 (**permalink**) 08.05.2013, 19:09

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

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

все прекрасно работает.
Но как только я делаю вот так

if ($(document).height() - $(window).height() <= $(window).scrollTop()) +300

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

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

Форум

Справочник

Discord чат

Курсы javascript