关于setInterval、setTimeout在jQuery中的使用注意事项

关于setInterval、setTimeout在jQuery中的使用注意事项

在jQuery中，借助setTimeout和setInterval可以很方便的实现定时器功能。以下是使用这两个方法时需要注意的一些事项：

1.执行环境
setTimeout和setInterval在执行函数时，它们的执行环境是全局的，不是jQuery对象。因此，如果想在回调函数中使用jQuery对象，必须将该对象作为参数传递给回调函数。

例如，以下代码会出现错误：

setInterval(function() {
    // 这里的this指全局对象，而不是jQuery对象
    this.hide();
}, 1000);

改写成如下形式即可：

var that = this; // 在需要调用的函数最外层，将this赋值给that变量
setInterval(function() {
    that.hide();
}, 1000);

2.取消定时器
在程序中使用定时器时，经常需要取消定时器，以防止出现内存泄漏和其他问题。可以通过调用clearTimeout方法或clearInterval方法来取消定时器。

例如：

var timer = setInterval(function() {
    // 定时执行的任务
}, 1000);
// 取消定时器
clearInterval(timer);

示例一：使用setInterval实现动态滚动
下面是一个使用setInterval方法实现动态滚动的示例。代码如下：

HTML部分代码：

<div class="scroll-box">
    <div class="list">
        <ul>
            <li>第1条消息</li>
            <li>第2条消息</li>
            <li>第3条消息</li>
            <li>第4条消息</li>
            <li>第5条消息</li>
        </ul>
    </div>
</div>

CSS部分代码：

<style>
.scroll-box {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    overflow: hidden;
}
.list {
    position: relative;
    top: 0;
}
.list ul {
    padding: 0;
    margin: 0;
    list-style: none;
    height: 500px;
}
.list li {
    height: 25px;
    line-height: 25px;
}
</style>

JavaScript部分代码：

<script>
$(function() {
    var speed = 30; // 滚动速度
    var timer = setInterval(function() {
        var $first = $('.list ul li:first');
        var height = $first.height();
        $first.animate({marginTop: -height + 'px'}, speed, function() {
            $first.css('marginTop', 0).appendTo('.list ul');
        });
    }, 2000);

    // 当鼠标移动到动态滚动区域时，停止自动滚动
    $('.scroll-box').hover(
        function() {clearInterval(timer)},
        function() {timer = setInterval(function() {
            var $first = $('.list ul li:first');
            var height = $first.height();
            $first.animate({marginTop: -height + 'px'}, speed, function() {
                $first.css('marginTop', 0).appendTo('.list ul');
            });
        }, 2000);}
    );
});
</script>

示例二：使用setTimeout实现倒计时
下面是一个使用setTimeout方法实现倒计时的示例。代码如下：

HTML部分代码：

<div class="countdown-box">
    <span class="hours">00</span> : <span class="minutes">00</span> : <span class="seconds">00</span>
</div>

CSS部分代码：

<style>
.countdown-box {
    font-size: 36px;
    text-align: center;
}
</style>

JavaScript部分代码：

<script>
$(function() {
    function Countdown() {
        var hours = 9; // 小时数
        var minutes = 56;// 分钟数
        var seconds = 0; // 秒数
        var timer = null;
        var $hours = $('.hours');
        var $minutes = $('.minutes');
        var $seconds = $('.seconds');

        // 显示倒计时
        function showCountdown() {
            $hours.text(formatNum(hours));
            $minutes.text(formatNum(minutes));
            $seconds.text(formatNum(seconds));
        }

        // 小时数、分钟数、秒数每秒减1
        function countdown() {
            seconds--;
            if (seconds < 0) {
                seconds = 59;
                minutes--;
                if (minutes < 0) {
                    minutes = 59;
                    hours--;
                    if (hours < 0) {
                        hours = 0;
                    }
                }
            }
            showCountdown();
            timer = setTimeout(countdown, 1000);
        }

        // 格式化数字，不足两位时用0补充
        function formatNum(num) {
          return num < 10 ? '0' + num : num;
        }

        // 开始倒计时
        function startCountdown() {
            showCountdown();
            countdown();
        }

        // 取消倒计时
        function cancelCountdown() {
            clearTimeout(timer);
            $hours.text('00');
            $minutes.text('00');
            $seconds.text('00');
        }

        // 绑定按钮事件
        $('.start-btn').click(startCountdown);
        $('.cancel-btn').click(cancelCountdown);
    }

    Countdown();
});
</script>