在前端开发中，我们常常需要控制和测量图像的显示时间，例如制作幻灯片、轮播图或者动画等。本文将介绍如何使用 JavaScript 和 CSS 来精确控制和测量图像的显示时间，同时提供相应的示例代码和指导意义。
1. 使用 setTimeout 控制图像的显示时间
我们可以使用 setTimeout 函数来控制图像的显示时间。该函数接受两个参数，分别是回调函数和延迟时间（单位为毫秒）。以下是一个示例：
const img = document.querySelector('img');
img.style.display = 'none';
setTimeout(() => {
img.style.display = 'block';
}, 2000);上述代码首先获取了页面中的一个图片元素，并将其隐藏。然后通过 setTimeout 函数设置了一个延迟时间为 2000 毫秒的定时器，当时间到达后，回调函数会被执行，将图片元素的显示样式设置为 block，使其显示出来。
使用 setTimeout 函数虽然可以控制图像的显示时间，但是它并不能精确地测量实际的显示时间。如果在延迟时间到达之前，用户操作了页面，例如滚动页面或者点击了其他链接，那么定时器就会被取消，无法准确地测量图像的显示时间。
2. 使用 requestAnimationFrame 测量图像的显示时间
为了解决 setTimeout 函数无法精确测量图像的显示时间的问题，我们可以使用 requestAnimationFrame 函数来代替定时器。该函数会在下一次浏览器绘制之前执行回调函数，精度更高，能够测量出实际的显示时间。
以下是一个使用 requestAnimationFrame 函数控制和测量图像显示时间的示例：
-- -------------------- ---- -------
----- --- - ------------------------------
----------------- - -------
--- ----------
-------- -------------------- -
-- ------------ -
--------- - ----------
-
----- ------- - --------- - ----------
-- -------- - ----- -
---------------------------------
- ---- -
----------------- - --------
-
-
---------------------------------上述代码首先获取了页面中的一个图片元素，并将其隐藏。然后定义了一个名为 showImage 的回调函数，在该函数中使用了 requestAnimationFrame 函数来控制图像的显示时间。当第一次执行 showImage 函数时，将当前时间戳赋值给 startTime 变量。接着计算经过的时间（即当前时间戳与 startTime 的差值），如果经过的时间小于 2000 毫秒，则再次调用 requestAnimationFrame 函数；否则，将图片元素的显示样式设置为 block，使其显示出来。
使用 requestAnimationFrame 函数虽然能够精确地测量图像的显示时间，但是在实际应用中也存在一些问题。例如，如果用户离开了当前页面或者将浏览器最小化，那么 requestAnimationFrame 函数就会停止执行，从而导致无法准确测量图像的显示时间。
3. 总结与指导意义
本文介绍了使用 JavaScript 和 CSS 来控制和测量图像的显示时间的方法，并提供了相应的示例代码。使用 setTimeout 函数能够控制图像的显示时间，但无法精确测量实际的显示时间；使用 requestAnimationFrame 函数能够精确测量图像的显示时间，但在实际应用中也存在一些问题。
在实际应用中，我们需要根据具体情况选择适合的方法。例如，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31446