php jquery mysql和ajax無限滾動的問題

Question

您好，我目前正在開發此網站：

http://remedia-solutions.com/clientes/0039_kiplingmexico/demo2/

它幾乎完成了，但是我目前在此部分的“ Coleccion”上有些麻煩，您要做的第一件事是選擇一種特定類型的袋子，一旦選擇它，您將只裝載20個袋子（此袋子從mysql db），當您到達頁面底部時，它將顯示另外20個袋子。 現在的問題是，當我觸底時，JS函數運行了5次：//有沒有辦法只運行一次然后稍等一會再運行？

這是我的Jquery代碼

單擊“ Coleccion”后，它將執行以下操作：

$("#coleccionmenu span").click(function() {
        $("#coleccionmenu span").removeClass('focuscoleccion')
        $(this).addClass('focuscoleccion');
        $("#contbolsas").fadeOut('fast')
        var id = this.id;

        $.ajax({
          url: "respuestabolsas.php",
          type: "POST",
          data: "id=" + id,

          complete: function() {
            //called when complete
          },

          success: function(x) {
            $("#contbolsas").css("display", "none");
            $("#contbolsas").html(x)
            $(".bolsacargada").css('opacity', '0');
            $("#contbolsas").css("display", "block");
            $(".bolsacargada").each(function(index) {
                $(this).delay(300*index).animate({opacity: 1}, 400);
            });
           hovercolores();
           if ($('#contbolsas > div:contains("Rawr")').length > 0) {
            $("#text").fadeOut()
            return false;
            }
            else{
                $("#text").fadeIn()
               cargamascoleccion(id)
            }




            },

          error: function() {
            //called when there is an error
          },
        });


});

加載后，我需要您剛剛單擊的集合的ID，因此當您向下滾動時，它僅顯示那些集合，而不顯示其他集合：

function cargamascoleccion(id){




        $("#todocoleccion").scroll(function() {



            var bottom = $("#todocoleccion").scrollTop() - $(window).height();

            if( bottom > $(".bolsacargada:last").offset().top + 300 ){

                $.ajax({
                  url: "respuestabolsas2.php",
                  type: "POST",
                  data: "id=" + id + "&idultimabolsa=" + $(".bolsacargada:last").attr('id'),

                  complete: function() {
                    //called when complete
                  },

                  success: function(x) {
                    hovercolores();
                   if(x != ""){

                        $("#contbolsas").append(x)


                   }
                    else{
                        $("#text").fadeOut()
                        return false;
                    }   

                 },

                  error: function() {
                    //called when there is an error
                  },
                });
            }
            });


        }

我懷疑PHP代碼上有問題，我認為問題在於上面的功能，因為當我到達最后一個包的偏移量時，它運行了4次。 有任何想法嗎？

Answer 1

它看起來像多次觸發ajax調用，因為在用戶滾動時多次滿足了條件。 您可能想要在執行ajax調用之前將另一個條件添加到if語句，該調用檢查aaxx調用是否已經啟動。 遵循以下原則

var ajaxComplete = true;
$("#todocoleccion").scroll(function() {



    var bottom = $("#todocoleccion").scrollTop() - $(window).height();

    if (bottom > $(".bolsacargada:last").offset().top + 300 && ajaxComplete) {

        $.ajax({
            url: "respuestabolsas2.php",
            type: "POST",
            data: "id=" + id + "&idultimabolsa=" + $(".bolsacargada:last").attr('id'),
            beforeSend: function() {
                ajaxComplete = false
            },
            complete: function() {
                //called when complete
                ajaxComplete = true;
            },

            success: function(x) {
                hovercolores();
                if (x != "") {

                    $("#contbolsas").append(x)


                }
                else {
                    $("#text").fadeOut()
                    return false;
                }

            },

            error: function() {
                //called when there is an error
            },
        });
    }
});​