在函数本身内部调用函数

Question

谁能解释为什么我们在函数内部而不是外部调用函数？

let i = 0;
let images = [];
const time = 500;

images[0] = 'Images/carousel1.jpg';
images[1] = 'Images/carousel2.jpg';
images[2] = 'Images/carousel3.jpg';

const changeImg = () => {

    document.slide.src = images[i];

    if(i < images.length - 1) {
        i++;
    } else {
        i = 0;
    }
    
    setTimeout('changeImg()', time);

};

onload = changeImg;

<img src="" name="slide">

Answer 1

如果您的问题是为什么我们为什么要从setTimeout('changeImg()', time);函数内部调用changeImg，那么我们来看一下。

触发onload事件时，将调用changeImg，从而开始工作。它将根据i的值交换图像。每次调用changeImg时，都会在changeImg秒内安排time的下一次调用。

这对当前的实现方式有几个特点，可能会很有趣...

首先，我们可以使用setInterval从函数外部调用changeImg函数，但是根据所涉及的时间，可能会导致图像交换时间中断。

由于这些setInterval / setTimeout函数不能保证何时触发，只是它们会在其设置的超时时间之后触发，因此有可能一个或多个此类调用彼此相邻触发，从而弄乱了时间... < / p>

通过使用嵌套的setTimeout，您可以确保在任何给定时间只有一个这样的事件挂起，并且只有在工作完成后，才能安排下一个事件。

因此我们可以看到，通过嵌套调用，我们可以保证有保证的顺序以及两次调用/图像交换之间的最短时间间隔。

您可以使用此playground进行播放，以了解定时如何不同步...只需稍微滑动滑块控件，您就会看到幻灯片不同步。