при скроллинге событие повторяется много раз
у меня при скроллинге происходит аякс запрос подгрузки данных. Вообще-то данные на страницу подгружаются один раз, однако firebug показывает несколько запросов и ответов. Сервер дергается, напрягается... Хотелось бы избавить его от лишней работы. Как это сделать?
Например на таком упрощенном скрипте $(window).scroll(function(){ alert('тра-та-та')}); |
зверек,
Возможный вариант решения ... <!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> |
работает, спасибо!
А как преобразовать этот скрипт так, чтобы задержка возникла после первого события. То есть тронули скоролл - событие возникло, а дальше задержка, чтобы избежать повторов. |
зверек,
Цитата:
Вариант для ... Цитата:
<!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> |
Этот скрипт как-то не так работает. происходит вот что: юзер скролит до конца окна, до момента, когда должна происходить очередная подгрузка данных, а потом вместо действия (подгрузки данных) настает пауза. Если юзер проскролит немного вверх (ниже уже некуда), начнется подгрузка данных.
когда я говорил, что подгрузка данных происходит всего один раз, я имел в виду, что при скролинге до конца окна firebug показывает несколько одинаковых запросов к серверу и ответов от него, а данные грузит только один раз (берет один ответ), как и положено. При скролинге у меня подгружаются строки таблицы и по идее подгружаемые строки должны дублироваться (как дублируется тот самый алерт в самом первом моем сообщении). Однако дубляжа не происходит. Хорошо, что не происходит, конечно. Все работает как надо, но не понятно почему :) а..ну вот пока писал, понял вроде почему... Осталось только с паузой разобраться... |
так есть же кучка готовых решений, возьмите первое попавшееся и посмотрите как другие делают
|
где эта куча? :) Что именно искать?
|
|
Цитата:
|
вобщем счас так:
$(window).scroll(function(){ if ($(document).height() - $(window).height() <= $(window).scrollTop()) { аякс} }) все прекрасно работает. Но как только я делаю вот так if ($(document).height() - $(window).height() <= $(window).scrollTop()) +300 чтобы подгрузка данных началась чуть раньше и была менее заметна для юзера, то как раз получаются дубляжные запросы к серверу. и чего-то я не могу пока понять, как это исправить... animhotep, мне кажется не совсем продуктивным ставить плагин, когда дело-то в паре строк кода. |
Часовой пояс GMT +3, время: 21:27. |