Jquery 函数创建一个异常的暂停

Jquery function creates an anomolous pause

本文关键字：一个 异常 暂停 函数 创建 Jquery      更新时间：2023-09-26

编辑：创建了一个小提琴，显示问题 https://jsfiddle.net/MichaelCaley/wcoba1jy/

下面的代码在每次淡入淡出之间创建 7 秒的暂停，直到我们到达代码重新运行自身的结尾。由于某种原因，此延迟变为 14/15 秒。

我已经做了很多搜索，但想出了王牌，所以任何帮助都是值得赞赏的。

    var imgshow = function(){
    $(".img1").delay(7000).fadeOut(1500, function(){
        $(".img2").delay(7000).fadeOut(1500, function(){
            $(".img1").delay(7000).fadeIn(1500, function(){
                $(".img2").delay(7000).fadeIn(1500, function(){
                    imgshow();
                });
            });
        });
    });
}
imgshow();

它实际上是按照编码运行的(但可能不是你想要的：-((。正在发生的事情是，第 2 fadeIn(视觉上(没有效果，因为 img2 位于 img1(完全不透明(下，导致 img1 停留的时间是原来的两倍。

希望以下内容清楚 - 1 表示完全不透明，0 表示完全透明

  • IMG3 (1( 在 IMG2 下 (1( 在 IMG1 下 (1( =显示> img1
  • IMG3 (1( 在 IMG2 下 (1( 在 img1 (0( 下 => 显示 img2
  • IMG3 (1( 在 IMG2 下 (0( 在 IMG1 (0( 下 => 显示 IMG3
  • IMG3 (1( 在 IMG2 下 (0( 在 IMG1 (1( 下 => 显示 IMG1
  • IMG3 (1( 在 IMG2 (1( 下 img1 (1( =显示> img1(当您可能需要 img2 时(...

如果你交换最后 2 fadeIn，你会得到一些每隔间隔 (https://jsfiddle.net/xx303tdc/( 改变颜色的东西，但序列将是 img1、img2、img3、img2、img1...否则，您可以将 img2 设置为在 img1 fadeIn后完全可见，然后重新启动循环。

无论如何，由于

您正在执行递归调用，因此最终会耗尽堆栈空间(由于延迟而非常慢(，因此重构以使用 CSS 过渡可能是个好主意。

相关文章：