js之定时器方法总结

来源：互联网发布：广州天拓网络待遇编辑：程序博客网时间：2024/05/18 14:14

(window.)setTimeout()//用于在指定的毫秒数后调用函数或计算表达式。

语法: setTimeout(code,millisec)

参数：code （必需）：要调用的函数后要执行的 JavaScript 代码串。millisec（必需）：在执行代码前需等待的毫秒数。

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

(window.)setInterval()//按照指定的周期（以毫秒计）来调用函数或计算表达式。

语法: setTimeout(code,millisec)

参数：code 必需。要调用的函数或要执行的代码串。millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

区别：

setTimeout只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束。如果运行的代码中再次运行同样的setTimeout命令，则可循环运行。（即要循环运行，需函数自身再次调用 setTimeout()）

而 setinterval是循环运行的，即每到设定时间间隔就触发指定代码。这是真正的定时器。

setTimeout则比较灵活，可以随时退出循环，而且可以设置为按不固定的时间间隔来运行，比如第一次1秒，第二次2秒，第三次3秒。

setTimeout重复执行的例子：

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script>var x = 0function countSecond(){   x = x+1  document.haorooms.haoroomsinput.value=x  setTimeout("countSecond()", 1000)}</script></head><html><body><form name="haorooms">   <input type="text" name="haoroomsinput"value="0" size=4 ></form><script>countSecond()</script></body> </html>

window.requestAnimationFrame方法：

链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。

注意: 如果想得到连贯的逐帧动画，函数中必须重新调用 requestAnimationFrame()。

0 0