Javascript 如何在不中断函数的情况下暂停setTimeout调用的执行？

所以我有一个图像，我想淡出，替换，然后淡入。我不想为这么一个小任务而麻烦jQuery，所以我找到了一个js淡入淡出函数，并根据自己的喜好对其进行了修改

起初，我的代码很简单：

setTimeout(function(){fadeOut(id, val);},300);
set_slide(s1, current);
setTimeout(function(){fadeIn(id, val);},300);

我很快了解到这不起作用，因为

set\u幻灯片（args）

和另一个

setTimeout（args）

将立即被调用，直到第一个

setTimeout（args）

运行完毕后才会被阻止

这迫使我做了一些非常难看的事情，并将我的代码链接在一起，这样第二个2个函数调用，

set\u slide（args）和setTimeout（args）

，在

fadeOut

中调用，我的第一个setTimeout就变成了

setTimeout(function(){
        fadeOut(s1,slide_1,current,9);
},300);

完整脚本：

var previous = 0; //will hold index of image directly before the current image
                        var current = 1; //will hold the index of the current image
                        var next = 2; //will hold the index of the image directly after the current image
                        var images = [];

                        var s1 = document.getElementById('slide1');
                        var s2 = document.getElementById('slide2');
                        var s3 = document.getElementById('slide3');


            var slide_1 = document.getElementById('slide1-img');
                    var slide_2 = document.getElementById('slide2-img');
                    var slide_3 = document.getElementById('slide3-img');

                    s2.addEventListener("click", moveBackward);//enable move forward image button
                    s3.addEventListener("click", moveForward);//enable move backwards image button


                    <?php 
                        //output each image src into an array
                        $photoCount=count($aboutGallery);
                        foreach ($aboutGallery as $photo){
                            echo 'images.push("'.$photo['full_url'].'");';
                        }
                    ?>
                    var lengthImg = images.length;

                    function moveForward(){
                        //each of these calls increases the index reference by 1 while looping
                        //around when the end of the array is reached
                        previous = (current)%(lengthImg); 
                        current = (current+1)%(lengthImg);
                        next = (current+1)%(lengthImg);

                        //set current slide
                        setTimeout(function(){
                            fadeOut(s1,slide_1,current,9);
                        },300);


                        //set previous and next slides
                        setTimeout(function(){
                            fadeOut(s2,slide_2,previous,9);
                            fadeOut(s3,slide_3,next,9);
                        },300);
                    }

function setSlide(container, slideNum){
                            container.src = images[slideNum];

                            if(document.readyState === 'complete'){//ensures scripts.js has been loaded and doesn't run on first load
                                setBackgroundImage();
                            }
                        }



function fadeOut(id,slide,position,val){
                              if(isNaN(val)){ val = 9;}
                              id.style.opacity='0.'+val;
                              //For IE
                             id.style.filter='alpha(opacity='+val+'0)';
                              if(val>0){
                                val--;
                                  console.log(position);
                                setTimeout(function(){fadeOut(id,slide,position,val)},50);
                              }else{
                                  //input next slide and fade in
                                  setSlide(slide, position);
                                  fadeIn(id,9);
                                  return;}

                            }

var-previous=0//将直接在当前图像之前保留图像索引
无功电流=1//将保存当前图像的索引
var-next=2//将直接在当前图像之后保留图像的索引
var图像=[]；
var s1=document.getElementById（'slide1'）；
var s2=document.getElementById（'slide2'）；
var s3=document.getElementById（'slide3'）；
var slide_1=document.getElementById（'slide1-img'）；
var slide_2=document.getElementById（'slide2-img'）；
var slide_3=document.getElementById（'slide3-img'）；
s2.addEventListener（“单击”，向后移动）//启用“向前移动图像”按钮
s3.addEventListener（“单击”，向前移动）//启用“向后移动图像”按钮
var lengthImg=images.length；
函数moveForward（）{
//这些调用中的每一个都会在循环时将索引引用增加1
//大约在到达阵列末端时
先前=（当前）%（长度）；
电流=（电流+1）%（长度mg）；
next=（当前+1）%（长度）；
//设置当前幻灯片
setTimeout（函数（）{
衰减（s1，滑片1，电流，9）；
},300);
//设置上一张幻灯片和下一张幻灯片
setTimeout（函数（）{
淡出（s2，幻灯片2，先前，9）；
淡出（s3，幻灯片3，下一步，9）；
},300);
}
函数setSlide（容器，slideNum）{
container.src=images[slideNum]；
如果（document.readyState==='complete'）{//确保已加载scripts.js，并且不会在第一次加载时运行
setBackgroundImage（）；
}
}
功能衰减（id、滑块、位置、val）{
如果（isNaN（val））{val=9；}
id.style.opacity='0'+val；
//对于IE
id.style.filter='alpha（不透明度='+val+'0'）；
如果（val>0）{
瓦尔--；
控制台日志（位置）；
setTimeout（函数（）{fadeOut（id，slide，position，val）}，50）；
}否则{
//输入下一张幻灯片并淡入
固定滑块（滑块、位置）；
法代因（id，9）；
返回；}
}

我认为这解决了问题，但是调用

test（）

之后的任何代码都不会等待，除非您使用

.then（）

在大多数情况下，我用的是生活。 此外，我认为异步函数得到了很好的支持：

---

在你的“丑陋”链接之后，它还能工作吗？是的，它能工作，但是有没有办法暂停脚本的执行在js中没有暂停的意思，因为这种语言是单线程的。但是，您可以取消设置超时。为此，您需要存储一个引用

var timerReference=setTimeout（myFunction，1000）

并且您可以随时通过调用

clearTimeout（timerReference）取消超时如果你认为这个丑陋，你可能想在这里建立一个UTL。但基本上这就是JS如何使用回调，而不是静态地总是调用相同的下一个函数。
const timer = ms => new Promise( resolve => setTimeout(resolve, ms))

async function test(){
      console.log('Starting')
      await timer(1000)
      console.log('after 1s')    

      await timer(2000)
      console.log('after 2s')

      await timer(3000)
      console.log('after 3s')
      console.log('Ended')
}

test()