正文

jQuery每秒执行一次的方法与setTimeout结合使用实现定时任务

/0 浏览量
0910

嘿，朋友！今天咱们聊聊前端开发里特别实用的小技巧——怎么让代码每秒“动”一下。你是不是也经常遇到这种需求：每隔一秒更新个时间显示？或者每秒钟去后台拉一次数据？别急，我带你把这事儿整得明明白白，保证你看完就能上手写代码。

先说说，为什么是setTimeout而不是setInterval？

很多新手一上来就用setInterval，觉得”每秒执行一次”嘛，这函数不就是干这个的吗？嘿，还真不是！setInterval有个大问题：如果代码执行时间超过你设的时间间隔，任务就会堆积，最后浏览器直接卡死。想象一下，你设每秒执行一次，结果每次执行花了0.5秒，那10秒后就有5个任务在排队等执行，这谁受得了？

setTimeout就不一样了，它就像一个靠谱的朋友，每次任务完成后才说”下一步？”，这样就能保证每次执行都是干净的。我们今天就主攻这个，保证稳定又高效。

核心代码：简单又强大的定时器

来，先看最基础的写法，就这几行代码，你就能搞定每秒执行的任务：

// 定义你的任务函数
function myTask() {
    // 在这里写你要每秒做的事情
    console.log("我被执行了！时间：" + new Date().toLocaleTimeString());
    
    // 任务完成后，安排下一次执行
    setTimeout(myTask, 1000); // 1000毫秒 = 1秒
}

// 启动定时器
setTimeout(myTask, 1000);

看到了吗？这就是核心技巧：在函数内部调用setTimeout，形成递归调用。每次任务完成，才安排下一次执行。这样保证不会堆积任务，浏览器也不会卡死。

不过，光看代码你可能觉得抽象，咱们来个实际例子。假设你要做个实时时钟显示，每隔一秒更新页面上的时间：

<!DOCTYPE html>
<html>
<head>
    <title>每秒更新时钟</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>当前时间：</h1>
    <div id="clock"></div>

    <script>
        // 更新时钟的函数
        function updateClock() {
            // 获取当前时间
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            
            // 补齐两位数，比如9点显示09
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;
            
            // 用jQuery更新页面内容
            $('#clock').text(hours + ':' + minutes + ':' + seconds);
            
            // 安排下一次更新
            setTimeout(updateClock, 1000);
        }
        
        // 页面加载完成后启动定时器
        $(document).ready(function() {
            updateClock();
        });
    </script>
</body>
</html>

这个例子超实用对吧？你保存成HTML文件，用浏览器打开，就能看到时间在每秒跳动。注意看，我用jQuery的$('#clock').text()来更新内容，这比原生JS的document.getElementById().innerHTML更简洁，而且跨浏览器兼容性更好。

进阶技巧：暂停和重启定时器

有时候我们需要能暂停和重启定时器，比如做游戏的时候，暂停按钮一按，时钟就不动了。这怎么办？很简单，把定时器ID存起来：

var timerId;

// 启动定时器
function startTimer() {
    timerId = setTimeout(function() {
        console.log("时间到！");
        // 可以继续安排下一次执行，或者结束
        // setTimeout(arguments.callee, 1000); // 不推荐用arguments.callee
    }, 1000);
}

// 停止定时器
function stopTimer() {
    clearTimeout(timerId);
    console.log("定时器已停止");
}

// 重新启动
function restartTimer() {
    stopTimer();
    startTimer();
}

你看，setTimeout会返回一个ID，这个ID就像定时器的”身份证号码”。我们用clearTimeout传这个ID，就能精确地停止这个特定的定时器，不会影响其他定时器。

实际项目中的完整示例

光说不练假把式，我给你一个更完整的例子，模拟一个实时通知系统，每秒钟检查是否有新消息：

$(document).ready(function() {
    var notificationCount = 0;
    var timerId = null;
    var isRunning = false;
    
    // 显示通知的函数
    function showNotification(message) {
        $('#notifications').append('<div class="notification">' + message + '</div>');
        // 5秒后自动消失
        setTimeout(function() {
            $('.notification:last').fadeOut(500);
        }, 5000);
    }
    
    // 每秒检查消息的函数
    function checkMessages() {
        // 模拟从服务器获取数据
        // 实际项目中这里会是 $.ajax 请求
        
        notificationCount++;
        
        // 假设每3秒有一条新消息
        if (notificationCount % 3 === 0) {
            showNotification('新消息：' + new Date().toLocaleTimeString());
        }
        
        // 安排下一次检查
        timerId = setTimeout(checkMessages, 1000);
    }
    
    // 开始检查
    function startCheck() {
        if (!isRunning) {
            isRunning = true;
            checkMessages();
            $('#startBtn').text('停止检查');
        }
    }
    
    // 停止检查
    function stopCheck() {
        if (isRunning) {
            isRunning = false;
            clearTimeout(timerId);
            $('#startBtn').text('开始检查');
        }
    }
    
    // 绑定按钮事件
    $('#startBtn').click(function() {
        if (isRunning) {
            stopCheck();
        } else {
            startCheck();
        }
    });
    
    // 页面加载时自动开始
    startCheck();
});

对应的HTML部分：

<!DOCTYPE html>
<html>
<head>
    <title>实时通知系统</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .notification {
            padding: 10px;
            margin: 10px 0;
            background-color: #e0f7fa;
            border-left: 4px solid #00bcd4;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>实时通知系统</h1>
    <button id="startBtn">停止检查</button>
    <div id="notifications"></div>

    <script src="app.js"></script> <!-- 上面那段JS代码 -->
</body>
</html>

这个例子展示了真实项目中怎么用。你能看到，我用了变量来控制状态，这样就能暂停和重启。而且我模拟了每隔3秒出一条消息的逻辑，这样你就能理解怎么在实际项目中控制频率。

常见错误和最佳实践

聊完正事，得说说新手常踩的坑。第一个错误就是忘了清除定时器，导致页面关闭后定时器还在后台跑，消耗资源。解决办法就是记住：用clearTimeout停掉它！

第二个错误是直接在setTimeout里写匿名函数，导致无法清除。就像这样：

// 错误示范
setTimeout(function() {
    console.log("执行任务");
}, 1000);

// 想停都停不了，因为没有保存ID

正确做法是：

// 正确示范
var timerId = setTimeout(function() {
    console.log("执行任务");
}, 1000);

// 需要的时候
clearTimeout(timerId);

第三个错误是递归调用时忘记传参数。有时候你的函数需要参数，但直接递归会丢失：

// 错误示范
function updateData(id) {
    // 更新数据...
    
    // 错误：这里直接调用会丢失id参数
    setTimeout(updateData, 1000);
}

// 正确示范
function updateData(id) {
    // 更新数据...
    
    // 正确：用闭包保留参数
    setTimeout(function() {
        updateData(id);
    }, 1000);
}

性能优化技巧

最后说说怎么让定时器更高效。如果你要做大量DOM操作，别每秒都操作，可以攒一攒：

var lastUpdate = 0;
var updateDelay = 1000; // 至少1秒更新一次

function efficientUpdate() {
    var now = Date.now();
    
    // 只有距离上次更新超过1秒才执行
    if (now - lastUpdate >= updateDelay) {
        // 执行DOM更新
        $('#data').text('最新数据：' + now);
        lastUpdate = now;
    }
    
    // 总是每秒检查一次，但只在必要时更新
    setTimeout(efficientUpdate, 100);
}

这样写，定时器本身每秒检查10次（100毫秒），但实际DOM操作每秒只执行1次。效率大幅提升！

总结

好了，朋友，今天咱们聊了怎么用setTimeout实现每秒执行一次的任务。核心就三点：

  1. 用递归调用setTimeout而不是setInterval，这样更稳定
  2. 保存定时器ID，方便随时停止
  3. 注意参数传递和性能优化

你现在应该能写出自己的定时器了。记住，刚开始写的时候，先搞个小例子试试，比如每秒更新个数字什么的，熟练了再放到正式项目里。

有啥问题随时问我，咱们一起进步！编程这事儿，多练多问，就没有过不去的坎儿。

-- 展开阅读全文 --