jquery定时执行函数

jQuery 定时执行函数的实现方法

在 jQuery 中，可以通过 JavaScript 原生定时器方法或 jQuery 的辅助方法来实现定时执行函数。以下是几种常见的方式：

使用 setInterval 实现重复执行

setInterval 方法会按照指定的时间间隔重复执行函数，直到被清除。

// 每隔 1 秒执行一次函数
var intervalId = setInterval(function() {
    console.log("定时执行函数");
}, 1000);

// 清除定时器
// clearInterval(intervalId);

使用 setTimeout 实现延迟执行

setTimeout 方法会在指定的延迟时间后执行一次函数。

// 延迟 2 秒后执行函数
var timeoutId = setTimeout(function() {
    console.log("延迟执行函数");
}, 2000);

// 清除定时器
// clearTimeout(timeoutId);

使用 jQuery 的 delay 方法

jQuery 的 delay 方法主要用于动画队列的延迟，通常与动画方法（如 fadeIn、slideUp 等）一起使用。

$("#element").delay(1000).fadeIn(); // 延迟 1 秒后淡入

使用 jQuery.animation 的 step 回调

通过 jQuery 动画的 step 回调，可以在动画的每一步执行自定义函数。

$("#element").animate({
    opacity: 0.5
}, {
    duration: 1000,
    step: function(now, fx) {
        console.log("当前透明度: " + now);
    }
});

使用 requestAnimationFrame 实现高性能定时

requestAnimationFrame 是浏览器提供的用于高性能动画的定时器，适合需要频繁更新的场景。

function animate() {
    console.log("高性能定时执行");
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

注意事项

• 使用 setInterval 时，需注意函数执行时间可能超过间隔时间，导致函数堆积。
• requestAnimationFrame 通常用于动画场景，默认频率为 60Hz（约 16.7ms 一次）。
• 清除定时器时需使用对应的 clearInterval 或 clearTimeout 方法。

以上方法可根据实际需求选择，setInterval 和 setTimeout 是最常用的定时执行方式。