Javascript 幻灯片失控

我有一个幻灯片，循环和一切，但它并不完全像我所期望的那样工作

这是一把小提琴：

Jquery：

// Customisable

var gap = 3;
var duration = 0.6;

// Non Customisable

var g = gap * 1000;
var d = duration * 1000;
var loop = $('.slideshow img').length;
var loopDelay = 200;
var x = 1;
var i = 1;

while(i <= loop){
    $('.slideshow img:nth-child(' + x + ')').delay(g).fadeOut(d);
    x++;
    i++;
    $('.slideshow img:nth-child(' + x + ')').delay(g + loopDelay).fadeIn(d);
    var h = g;
    var g = x * h;
    var lD = loopDelay;
    var loopDelay = lD + 200;
}

//可定制
var-gap=3；
风险值持续时间=0.6；
//不可定制
var g=间隙*1000；
var d=持续时间*1000；
变量循环=$（'.slideshow img'）。长度；
var环路延迟=200；
var x=1；
var i=1；
而（i问题在于jQuery对影响图形显示的命令使用多线程，因此您的fadeIn和fadeOut调用是在后台运行的（在它们自己的线程中）当主执行线程立即执行下一条指令时，。因此，当第一个图像淡出时，主线程已经告诉下一个图像淡入。下一个图像，以及之后的图像，依此类推。所有这些都（或多或少）完全同时进行

您需要的是fadeIn和fadeOut等命令的回调功能。请参阅并注意，可以提供可选回调。此回调必须是一个函数，仅在淡出完成后才会触发。您需要使用此行为，以便脚本仅在每次淡出完成后才继续

例如：

hideCurrentImage = new function() {
    $currentImage = //your code to select displayed image goes here
    $currentImage.fadeOut(d, showNextImage);
};

showNextImage = new function() {
    $nextImage = //your code to select next image from set goes here
    $nextImage.fadeIn(d, hideCurrentImage);
};

使用这种机制意味着图像只能一个接一个地淡入淡出，因为每次调用fadeIn和fadeOut都指定淡入淡出完成后要使用的回调函数。因此，您不会看到它们同时加载和淡出