Question

所以我有一个图像，我想淡出，替换，然后淡入。我不想打扰jQuery这么一个小任务，所以我发现一个js淡入淡出功能并修改它我喜欢的。

起初我的代码很简单：

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

我很快就知道这不起作用，因为set_slide(args)和另一个setTimeout(args)将立即被调用，而不是在第一个setTimeout(args)完成运行之前被阻止。

这迫使我做了一些非常丑陋的事情并将我的代码链接在一起，以便在set_slide(args) and setTimeout(args)内调用第二个2函数调用fadeOut，并且我的第一个setTimout变为

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;}

                            }

Answer 1

我认为这解决了问题，但test()调用后的任何代码都不会等待，除非您使用.then()

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()

在大多数情况下，我使用IIFE。另外我认为异步功能得到很好的支持： http://caniuse.com/#feat=async-functions

http://caniuse.com/#feat=promises

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

1 个答案: