Javascript Was：呼叫所有的恶霸！现在：如何将ajax调用延迟到映像div为空？

更新2：抱歉，但我不确定如何最好地更新此…无论是通过编辑原件，还是在下面添加我自己的评论。给我正确的方向

我决定把这个问题作为一个新的问题重新提出，因为我已经改变了一些事情，不想再做更多的转移注意力的尝试，也不想在错误的道路上浪费时间

不管是对是错，该报告的标题是：“最初的问题是“调用所有CacheBuster”…现在——“我可以延迟ajax调用直到div为空吗？”

以下是原始帖子…我建议你找到更新的帖子

更新：Red Herring alert。这不是缓存问题，只是当我的下一个/上一个按钮到达内容末尾时出现的循环问题。是的，有一些奇怪的警报行为，但我现在忽略了这一点，正在为下一个/上一个循环进行修复。抱歉，希望还没有人看到这一点

我现在将继续跟踪内容，但一旦我弄清楚，就会更新

几天来，我一直在努力修复我的图像幻灯片解决方案中的一个粗糙的工件。我认为我正在修复中，因为这似乎真的是一个ajax浏览器缓存问题，但也许不是？在查看stackoverflow之后，我尝试了我能找到的所有方法：JSONP with GET and cache=false，cache cocontrol“no store”，甚至一个缓存破坏时间戳，以及一个ajaxSetup缓存false，都没有用

我只需要发布部分代码，因为我已经在MVC结构中设置了它，并且有多个文件包含…所以请耐心听我解释。这看起来很复杂，但是它都能出色地工作，，（Chrome和FF）直到…它都没有

概述：

我的页面有一系列菜单链接，每个链接都设置了不同的“类别id”“对于ajax调用。我的页面有一个空的imagediv，我根据MYSQL db查询返回的JSON数据以编程方式向其中添加img元素。我有上一个和下一个控件，使用css不透明管理的交叉淡入过渡一次查看一个图像

下面是它的工作原理：

选择其中一个链接将执行我的Ajax函数，该函数调用actions.php并传递类别ID

actions.php使用category id执行MYSQL db查询，并以JSONP格式返回匹配图像URL的列表（最初这是JSON，但我切换到JSONP是徒劳的，因为我认为可以利用cache=false default）

ajaxsuccess函数还为每个url创建一个img元素，并通过CSS将第一个元素设置为不透明（所有其他元素通过CSS都是透明的）

然后，我可以使用“下一步/上一步”按钮，通过“下一步”和“上一步”功能一次显示一个图像

我通过添加/删除css类来更改不透明度，实现了交叉淡入淡出过渡

当我到达img元素的末尾时，它会循环回另一端，并向前和向后工作

现在这一切都非常出色，但只适用于我选择的第一个类别链接

现在奇怪的事情开始了。如果我在页面上选择一个不同的链接来检索不同的图像集，我可以再次使用下一个/上一个，但是当我到达图像的末尾时，我突然有两个重叠的图像（似乎两个图像同时不透明）

我还添加了一个警报来跟踪正在发生的事情，奇怪的是警报被多次触发！！每次我选择一个新的类别链接时，警报都会“生成”，直到我有十几个或更多的链接，这些链接都会通过单击“下一个”或“上一个”连续触发

转到另一页并返回解决了问题-直到我再次选择第n个类别

似乎存在一些无法清除的图像缓存（以及警报？），因此我不确定这是否是ajax缓存问题，但还有什么可能？还有什么我可以试试的

下面是包含ajax调用的主链接函数调用。我添加了一些评论以帮助澄清：

$(".nav-link").click(function() {

       var category = $(this).attr("data-categoryid");  //link which sets the category

       //set timestamp to avoid caching??
       var tsTimeStamp = new Date().getTime();

       //getImageData accesses MYSQL and returns JSONP encoded list of image urls which are stored in my server filesystem
       //for the specified category typeid   

        $.ajax({

            type: "GET",
            url: "actions.php?action=getImageData&?cachebuster=" + new Date().getTime() + "",  //tried to use a cache buster! didn't work.
            data: "categoryid= " + category,
            time: "tsTimeStamp",
            headers: {"Cache-Control": "no-store"},
            dataType: 'jsonp',

            success: function(result) {
                $("#imagediv").empty(); //empty the previous imagediv of all img contents (attempt to avoid the cacheing issues!!!!)
                var imagearray = [];             

                for (i=0; i< result.length; i++) {

                    imagearray.push(result[i]["url"]);

                    //create the img elements and append to the imagediv container
                    var $img = $( "<img class='img-fluid main-image myImage mx-auto d-block nextimage'  id='myImage' src='" + imagearray[i] + "' >");
                    $("#imagediv").append($img);     
                }

                //set the first image to opaque...all others default to opacity=0 via css
                $("#imagediv img").eq(0).addClass("opaque");

                //if there's only one image url in the results, hide the next/previous buttons
                if (result.length > 1) {$("#centerdiv").show();} else {$("#centerdiv").hide();}

                var imageIndex = 0;

                $("#next").click(function(){
                    $("#imagediv img").eq(imageIndex).removeClass("opaque");

                    alert($("#imagediv").length + " " + imageIndex); //note that this alert fires 3 times on a 2-nth category search!!!

                    imageIndex +=1;

                    //if at end of array, loop back to beginning - that's when I get 2 images superimposed but only on the 2-nth category search!!
                    if (imageIndex == result.length) {
                        imageIndex = 0;
                    }

                    $("#imagediv img").eq(imageIndex).addClass("opaque");

                });

                $("#previous").click(function(){
                    alert(imageIndex);
                    $("#imagediv img").eq(imageIndex).removeClass("opaque");

                    imageIndex -=1;

                    //if going in "reverse" and at beginning of array, loop back to the end
                    if (imageIndex == -1) {
                        imageIndex = result.length-1;
                    }

                    $("#imagediv img").eq(imageIndex).addClass("opaque");

                });



            },  cache: false,
        }) 

    });

---

.click（）并没有删除任何以前的click处理函数，它只是添加了另一个函数……谢谢John，我在创建了Jaromanda同样回答的新问题后看到了这个响应。完美的解决方案……它解释了叠加图像的所有古怪行为等等。再次感谢。

if ($_GET['action'] == 'getImageData') {

  if ($_GET) {

    $myid = $_GET['categoryid'];

    $whereClause = "WHERE menucategoryid = ".$_GET['categoryid']. "";

    $query = "SELECT * FROM images" .$whereclause. "";

    $result = mysqli_query($link, $query);

    if (mysqli_num_rows($result) == 0) {

        echo "Nothing to display.";

    } else  {

        $numrows = mysqli_num_rows($result);

        $query = "SELECT * FROM images ".$whereClause."";
        //for each image returned by the above query, 
        $result = mysqli_query($link, $query);
        $url = array();
        while ($row = mysqli_fetch_assoc($result))  {

          $url[] = array(

              'url' => $row['imageurl'],
              'title' =>$row['title'],
              'caption' => $row['caption']


          );

        }

         echo $_GET['callback'] . '('.json_encode($url, JSON_PRETTY_PRINT).')';

    } 

  }

}