javascript - JavaScript 中的自定义计时器

Question

我有一组图片 URL，我需要显示每张图片的确切时间(750 毫秒)。我已经使用 setTimeout 函数实现了该页面，它工作正常，只是我想要显示每张图片的时间增长到 752 毫秒甚至更多......

根据这个post和许多其他人一样，我创建了一个新函数:

        function getTimestamp() 
        { 
            return window.performance.now(); 
        }

        function waitFor( time, nextFunction )
        {
            var t1 = getTimestamp();
            console.log("Start Time: " + t1);

            var t2 = getTimestamp();

            while ( t2 - t1 <= time)
            {
                t2 = getTimestamp();
            }

            console.log("End Time: " + t2);

            nextFunction();
        }

我知道javascript是在单线程中执行的，如果我运行使用while语句实现的等待函数，页面的主线程将被卡住。换句话说，我的函数是同步执行的。就我而言，“冷冻”时间用于呈现图片，所以对我来说没问题。

我正在更改图像源如下:

            var url = "images/Practice" + imagesArr[randomNum] +".png";
            console.log("image path: " + url);
            imagesArr.splice(randomNum, 1);
            pictureImg.src = url;
            pictureImg.style.display="block"; 

尽管我的代码完美地更改了图像源，但有时浏览器不会更改图像。它仅显示显示的第一张图片，有时会混淆顺序。

我的页面是here .

重要的是，我的网站将仅在 Chrome 中运行。

我真的很困惑，希望得到任何帮助!!!

谢谢你，最大。

Answer 1

...except that the time i want to display each picture grows to 752ms or even more...

如果出现 2 毫秒超时的问题，则不能使用浏览器。

基本上，当您更改图像的 src 时，浏览器不需要立即更新其显示，而且通常不会；相反，它可能会等到 JavaScript 代码中的当前“任务”完成(例如，事件处理程序返回、计时器函数返回等)。因此，更新 src 并锁定浏览器不会达到您想要的效果。

如果您更改src，请执行setTimeout(..., 750);，然后返回，这基本上是您在浏览器中可以做的最好的事情。它会更新其显示并在大约 750 毫秒内给您回电以执行下一步操作。没有比这更精确的了。

但是，如果您想继续尝试忙等待方法，一种方法是设置 src，获取当前时间，执行 setTimeout(..., 0) ，然后在计时器触发时输入忙等待(将在 0 到 10 毫秒后)。由于您知道更改 src 的时间，因此您也知道 750 毫秒后的时间。但请注意，您不知道人们何时开始看到图像，这很可能是在 src 设置后的几毫秒。

<小时/>

旁注:我假设您在开始之前预加载这些图像，因此当您设置src时，它们来自缓存。如果没有，您会想要这样做，因为获取图像时的延迟最多可能是几十毫秒，最坏的情况下会更长。