Event Scroll
Доброе утро всем, помогите решить проблему
index.php
var num = 10;
function getNextContent(){
$.ajax({
url: "ajax-load.php",
type: "GET",
data: {"num": num},
cache: false,
success: function(response){
if(response == 0){
}else{
num = num + 10;
$("#Updates").append(response);
}
}
});
};
$(window).scroll(function(){
var windowscrollTop = $(window).scrollTop();
var documentheight = $(document).height();
var windowheight = $(window).height();
var option1 = 50;
var opa = documentheight - windowheight - option1;
if (windowscrollTop > opa)
{
getNextContent();
};
});
ajax-load.php
<?php
@mysql_connect("###", "###", "#");
mysql_query("SET NAMES utf8");
$db = @mysql_select_db("###");
if(isset($_GET['num'])){
$num = $_GET['num'];
$sql = mysql_query("SELECT * FROM ### ORDER BY id DESC LIMIT $num , 10");
if(!$sql)
{
echo "Возникла ошибка - ".mysql_error()."<br>";
echo $sql;
exit();
}
if(mysql_num_rows($sql) > 0){
while($row = mysql_fetch_array($sql))
{
printf ("###");
}
}
}
?>
Выводит все записи динамически при прокрутки почти до самого низа скролла при помощи "колёсика" на мышки. Если кликать мышкой на скролл бар в самый низ - тоже всё нормально. Но если зажать кнопку мышки и "затягивать" скролл в самый низ принудительно - то функция вывода контента выведит сразу несколько раз один и тот же материал с БД. Помогите пофиксить :help: :help: :help: Буду очень благодарен |
Заводишь видимую в обеих функциях переменную-флаг.
var busy = false; перед ajax-запросом устанавливаешь ее в true. После выполнения запроса (в обработчике success или error или как там в jquery) выставляешь ее в false. а по onscroll проверяешь ее:
if (busy)
return;
|
Цитата:
var num = 10;
var ajax_status = 1;
function getNextContent(){
var ajax_status = 1;
$.ajax({
url: "ajax-load.php",
type: "GET",
data: {"num": num},
cache: false,
success: function(response){
if(response == 0){
}else{
num = num + 10;
$("#Updates").append(response);
var ajax_status = 0;
}
}
});
};
$(window).scroll(function(){
var windowscrollTop = $(window).scrollTop();
var documentheight = $(document).height();
var windowheight = $(window).height();
var option1 = 50;
var opa = documentheight - windowheight - option1;
if ((windowscrollTop > opa) && (ajax_status == 1)){
getNextContent();
};
});
Не пофиксилось ((((:cray: А через Onscroll у меня при перезапуске значение false, а после первого движение колёсиком true на всё время. |
var num = 10;
var ajax_status = 0;
function getNextContent(){
ajax_status = 1;
$.ajax({
url: "ajax-load.php",
type: "GET",
data: {"num": num},
cache: false,
success: function(response){
ajax_status = 0;
if(response == 0){
}else{
num = num + 10;
$("#Updates").append(response);
}
}
});
};
$(window).scroll(function(){
if (ajax_status == 1)
return;
var windowscrollTop = $(window).scrollTop();
var documentheight = $(document).height();
var windowheight = $(window).height();
var option1 = 50;
var opa = documentheight - windowheight - option1;
if (windowscrollTop > opa)
getNextContent();
});
1)Ключевое слово var нужно указывать только при объявлении переменной. 2)Определитесь со значениями переменной ajax_status. Думаю понятней что изначально код 0, а во время запроса - 1. 3)Проверять ajax_status надо сразу, чтобы не производить напрасные расчеты (это не абы-что, а прокрутка, а она и так не всегда плавная) |
Код работает - спасибо тебе большое! :)
|
| Часовой пояс GMT +3, время: 14:13. |