Javascript 是"；正在调用所有CacheBuster“。。。。现在—“现在”；我可以延迟ajax调用直到div为空吗；

我开始了一个粗糙的js幻灯片问题，认为我有一个与ajax功能相关的缓存问题，等等，但我想我已经隔离了这个问题。这是大纲，然后是代码，然后是问题

主页有一组链接（类别），用于驱动MYSQL查找

主页面有一个空的图像容器div（位置：relative）

我做了一个ajax调用，它从MYSQL返回一组图像源URL

我创建单个img元素（位置：绝对），并将它们附加到主imagediv。imgs默认为不透明度：通过CSS为0

我通过CSS将第一个图像设置为不透明度：1

如果有多个图像，我会显示上一个/下一个按钮

下一步/上一步工作是添加/删除不透明度和选定类。如果我是最后一个孩子，我会换成第一个，反之亦然。这种交叉渐变效果很好 现在乐趣开始了。每次我选择一个不同的类别链接时，我首先清空先前内容的imagediv，以便可以用新结果重新填充它。这似乎也很管用……大多数时候

我注意到，在类别之间来回切换后，机制“断裂”——我的意思是下一个/上一个不会推进图像。但是，如果我再次选择相同的类别，基本上是“刷新”它，它会重新开始工作！有时需要4-5个不同的类别选择来打破它，但它总是在某些时候失败。此外，有时当我点击分类链接时，我会看到一个空白屏幕（没有第一张图像是不透明的）…即使我知道有一张

我想知道ajax调用和成功函数是否在imagediv清空之前完成，空方法是否在ajax函数之后完成

在我证明imagediv为空之前，我可以推迟使用ajax函数吗？伪代码：“如果imagediv不为空，请清空它，直到它为”

$（“.nav链接”）。单击（函数（）{
var category=$（this）.attr（“数据类别ID”）；//设置类别的链接
//在发生任何事情之前，请清除前面的imagediv
$（“#imagediv”）.empty（）；
//getImageData访问MYSQL并返回JSON编码的图像URL、标题和标题列表
//对于指定的类别typeid-每个类别在主页上都有自己的触发链接
$.ajax({
类型：“POST”，
url:“actions.php？action=getImageData&？cachebuster=“+new Date（）.getTime（）+”，//尝试使用缓存buster！无效。
数据：“categoryid=“+类别，
数据类型：“json”，
成功：功能（结果）{
对于（i=0；i1）{$（“#centerdiv”）.show（）；}其他{$（“#centerdiv”）.hide（）}
}，cache:false，
}); 
$（“#下一步”）。单击（函数（）{
var$next=$（'.myImage.selected'）.removeClass（'selected不透明'）.next（'.myImage'）；
如果（$next.length）{
$next.addClass（'selected不透明'）；
}
否则{
$（“.myImage:first”）.addClass（'selected不透明'）；
}
});
$（“#上一个”）。单击（函数（）{
var$prev=$（'.myImage.selected'）.removeClass（'selected不透明'）.prev（'.myImage'）；
如果（$prev.length）{
$prev.addClass（'selected不透明'）；
}
否则{
$（“.myImage:last”）.addClass（'selected不透明'）；
}       
});    
});

---

感谢您接受这篇长文章（以及之前的一篇）。由于多个文件的结构、MYSQL的使用、我自己在一个目录中的图像文件等等，我无法对此进行处理。

每次

$（“.nav link”）。单击（调用function（）{

，您将添加另一个

$（“#next”）。单击（function（）{/code>和
$（“#previous”）。单击（function（））{
…在添加新的单击处理程序之前，您需要删除现有的单击处理程序。这是一个完美的响应。而且，它解释了我以前经历过的各种疯狂的事情…叠加图像等。我已经为此绞尽脑汁三天了，解决方案花了一分钟时间才实现！我添加了两行代码到在ajax调用之前“关闭”点击处理程序，它可以完美地工作。如果可以的话，我会给你买一杯或十杯啤酒。外面的温度已经达到40摄氏度，一杯或十杯啤酒是受欢迎的：p
$(".nav-link").click(function() {

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

        //before anything happens, clear out the prior imagediv
       $("#imagediv").empty(); 

       //getImageData accesses MYSQL and returns JSON encoded list of image urls, captions and titles
       //for the specified category typeid  - each category has it's own triggering link on the main page
        $.ajax({

            type: "POST",
            url: "actions.php?action=getImageData&?cachebuster=" + new Date().getTime() + "",  //tried to use a cache buster! didn't work.
            data: "categoryid= " + category,
            dataType: 'json',

            success: function(result) {

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

                    var $img = $( "<img class='img-fluid main-image myImage mx-auto d-block' src='" + result[i]["url"] + "' >");

                    //create the img elements and append to the imagediv container
                    $("#imagediv").append($img);

                }   

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


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

            },  cache: false,

        }); 

        $("#next").click(function(){

            var $next = $('.myImage.selected').removeClass('selected opaque').next('.myImage');
            if ($next.length) {
            $next.addClass('selected opaque'); 
            }
            else {
                $(".myImage:first").addClass('selected opaque');
            }

        });

        $("#previous").click(function(){

            var $prev = $('.myImage.selected').removeClass('selected opaque').prev('.myImage');
            if ($prev.length) {
            $prev.addClass('selected opaque'); 
            }
            else {
                $(".myImage:last").addClass('selected opaque');
            }       

        });    

    });