при скроллинге событие повторяется много раз
у меня при скроллинге происходит аякс запрос подгрузки данных. Вообще-то данные на страницу подгружаются один раз, однако 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, время: 18:11. |