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

问题描述：

所以我有一个图像，我想淡出，替换，然后淡入。我不想打扰与jQuery这样一个小任务，所以我发现了一个js淡入淡出功能，并将其修改为我喜欢。如何在不破坏函数的情况下暂停执行setTimeout调用？

起初，我的代码很简单：

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

我很快意识到，这并不工作，因为set_slide(args)和其他setTimeout(args)将被立即调用，而不是阻塞，直到第一setTimeout(args)运行完成。

这迫使我做的东西很丑陋和链我的代码在一起，使得第二2函数调用，set_slide(args) and setTimeout(args)，被称为内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;} 

          }

是你的“丑陋”的链接后工作？ –

是的，它有效，但有没有办法暂停脚本的执行 –

没有这样的事情在js中暂停，因为该语言是单线程的。但是，您可以取消setTimeout。为此，你需要存储一个引用'var timerReference = setTimeout（myFunction，1000）;'你可以随时通过调用'clearTimeout（timerReference）'来取消超时;' –

答

我认为这可以解决问题，但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调用？

相关推荐