setTimeout怎么用【详细讲解】

setTimeout 是 JavaScript 提供的一个函数,用于在指定的时间延迟后执行一段代码(函数)。它的基本用法如下:

setTimeout(function, delay);
  • function: 要执行的函数。
  • delay: 延迟的毫秒数。

示例:

console.log("Start");
setTimeout(function() {
  console.log("Delayed log after 2000ms");
}, 2000);
console.log("End");

在这个示例中,"Start""End" 会立即被打印,而 "Delayed log after 2000ms" 将会在 2000 毫秒(2秒)后被打印出来。

你也可以使用箭头函数来实现同样的效果:

console.log("Start");
setTimeout(() => {
  console.log("Delayed log after 2000ms");
}, 2000);
console.log("End");

需要注意的是,setTimeout 不保证在指定的毫秒数之后立即执行,它只是将函数放入异步任务队列中,并在队列中的等待时间过后执行。如果队列中有其他任务需要执行,那么可能会稍微延迟执行。

防抖和节流是优化JavaScript性能的两种常见方法。 ## 防抖 防抖是指在一段时间内,只执行最后一次事件,而忽略在这段时间内发生的其他事件。通常用于用户频繁操作的场景,例如按钮点击、滚动事件等。 实现防抖可以用setTimeout来实现,例如: ```javascript function debounce(fn, delay) { let timerId; return function() { const context = this; const args = arguments; clearTimeout(timerId); timerId = setTimeout(function() { fn.apply(context, args); }, delay); }; } ``` 在这个例子中,debounce函数接收两个参数,第一个是需要防抖的函数,第二个是延迟时间。返回一个函数,每次调用这个函数时,首先清除之前设置的定时器,然后再设置一个新的定时器。如果在延迟时间内多次调用这个函数,只有最后一次调用会被执行。 ## 节流 节流是指在一段时间内,只执行一次事件,而忽略在这段时间内发生的其他事件。通常用于用户频繁触发事件,例如鼠标移动、窗口resize等。 实现节流可以用setTimeout和时间戳来实现,例如: ```javascript function throttle(fn, delay) { let timerId; let lastTime = 0; return function() { const context = this; const args = arguments; const now = Date.now(); if (now - lastTime >= delay) { fn.apply(context, args); lastTime = now; } else { clearTimeout(timerId); timerId = setTimeout(function() { fn.apply(context, args); }, delay - (now - lastTime)); } }; } ``` 在这个例子中,throttle函数接收两个参数,第一个是需要节流的函数,第二个是时间间隔。返回一个函数,每次调用这个函数时,判断当前时间与上次调用时间的时间差是否大于等于时间间隔,如果大于等于,执行函数并更新上次调用时间;否则,清除之前设置的定时器,并设置一个新的定时器,延迟时间为时间间隔减去时间差。这样,在时间间隔内多次调用这个函数,只有第一次调用会被执行。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值