在前端开发中,经常会用到setTimeout和setInterval这两个函数。它们都是用来定时执行一段代码的,但是在具体使用上有些不同。
setTimeout
setTimeout可以让指定的函数在指定的时间后执行一次。它接收两个参数:要执行的函数和延迟的毫秒数。例如:
function sayHello() { console.log('Hello'); } setTimeout(sayHello, 1000); // 1秒后输出 Hello
如果需要传递参数给函数,可以在第三个参数开始指定:
function saySomething(name) { console.log(`Hello, ${name}`); } setTimeout(saySomething, 1000, 'Amy');
setInterval
setInterval和setTimeout类似,也是用来定时执行函数的。不同之处在于,setInterval会每隔一段时间重复执行指定的函数,直到被清除或页面关闭。它也接收两个参数:要执行的函数和执行间隔的毫秒数。例如:
let count = 0; function increaseCount() { console.log(++count); } setInterval(increaseCount, 1000); // 每秒钟输出累加值
因为setInterval会无限执行函数,所以需要注意避免出现死循环。
应用场景
setTimeout和setInterval都可以用来实现定时任务。例如,轮播图、滚动消息等功能都可以通过setInterval实现。而setTimeout则可以用来实现延迟加载等功能。
需要注意的是,定时任务如果执行时间过长,可能会影响页面性能。因此,在使用时需要根据具体情况选择合适的执行间隔和执行方式。
示例代码
-- -------------------- ---- ------- -------- -------------- - ----- ------ - --------------------------------------- --- ----- - -- -------------- -- - -------------------- -- ------------------- - -------- --------------------------- - -------- -------- -- ------ --- -------------- - ----- - -- - -- ------ - ---------------
上述代码可以实现轮播图的效果。将所有图片隐藏,然后每2秒钟显示一个图片,直到所有图片都被显示过一遍后重新循环。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/8034