如何在 GSAP 或 Javascript 中以不同的时间间隔调用函数？答案

【问题标题】：How to call a function at different intervals in GSAP or Javascript?如何在 GSAP 或 Javascript 中以不同的时间间隔调用函数？
【发布时间】：2015-02-02 18:26:27
【问题描述】：

我有一个非常基本的幻灯片如下：

HTML

<div id="slideshow">
    <img class="slide" src="img/slideshow-1.png" >
    <img class="slide" src="img/slideshow-2.png" >
    <img class="slide" src="img/slideshow-3.png" >
</div>

$(function(){

    var $slides = $(".slide");          //slides
    var currentSlide = 0;               //keep track on the current slide
    var stayTime = 3;                   //time the slide stays
    var slideTime = 1.3;                //fade in / fade out time

    TweenLite.set($slides.filter(":gt(0)"), {autoAlpha:0}); //we hide all images after the first one
    TweenLite.delayedCall(stayTime, nextSlide);             //start the slideshow

    function nextSlide(){                   
            TweenLite.to( $slides.eq(currentSlide), slideTime, {autoAlpha:0} );     //fade out the old slide
            currentSlide = ++currentSlide % $slides.length;                         //find out the next slide           
            TweenLite.to( $slides.eq(currentSlide), slideTime, {autoAlpha:1} );     //fade in the next slide
            TweenLite.delayedCall(stayTime, nextSlide);                             //wait a couple of seconds before next slide
    }

});

如您所见，它只是将每个图像显示 3 秒（停留时间），然后将其淡出。假设我想保留第一个图像 8 秒，第二个 6.5 秒，第三个 3 秒。我的意思是所有图像的逗留时间都不相同。如何在 GSAP 或 Javascript 中实现这一点？

【问题讨论】：

你的意思是，你怎么能减少stayTime参数？
不，我的意思不是按固定间隔调用函数，而是按不同间隔调用它。

标签： javascript timing gsap

【解决方案1】：

一种解决方案是将stayTime 转换为一个数组，每张幻灯片一个项目。

var stayTime = [8, 6.5, 3];

然后：

TweenLite.delayedCall(stayTime[currentSlide], nextSlide);

【讨论】：