浅谈jQuery中setInterval()方法

什么是setInterval()方法

setInterval()方法是jQuery中的定时器函数，用于在指定的时间间隔内重复执行一个函数。该方法可以用于实现动画效果、轮播图、定时获取数据等场景。

语法：

var intervalId = setInterval(fn, delay);

• intervalId：计时器 ID，用于 later 操作
• fn：要定期调用的函数，可以是指定的一个函数，也可以是匿名函数
• delay：每次调用之间的时间间隔，以毫秒为单位

setInterval()方法的使用

示例一：实现自动轮播图

<div id="carousel">
  <ul>
    <li><img src="image01.jpg"></li>
    <li><img src="image02.jpg"></li>
    <li><img src="image03.jpg"></li>
  </ul>
</div>

#carousel {
  width: 500px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
#carousel ul {
  list-style-type: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 1500px;
  animation: slide 10s infinite;
}
#carousel ul li {
  float: left;
  width: 500px;
}
@keyframes slide {
  0% {
    left: 0;
  }
  25% {
    left: -500px;
  }
  50% {
    left: -1000px;
  }
  75% {
    left: -1500px;
  }
  100% {
    left: 0;
  }
}

$(document).ready(function() {
  var intervalId = setInterval(function() {
    $('#carousel ul').animate({marginLeft: '-500px'}, 1000, function() {
      $(this).find('li:last').after($(this).find('li:first'));
      $(this).css({marginLeft: 0});
    });
  }, 3000);

  $('#carousel ul').hover(function() {
    clearInterval(intervalId);
  }, function() {
    intervalId = setInterval(function() {
      $('#carousel ul').animate({marginLeft: '-500px'}, 1000, function() {
        $(this).find('li:last').after($(this).find('li:first'));
        $(this).css({marginLeft: 0});
      });
    }, 3000);
  });
});

解释：

• setInterval()方法每隔3秒钟执行一次匿名函数，实现轮播图无限循环
• 匿名函数中使用animate()方法实现动画效果，让图片序列在1秒钟内向左移动500px
• 移动完毕后，使用find()和after()方法实现取出第一个元素追加到最后一个位置，实现无缝衔接
• 每次移动之后要重置marginLeft属性，否则下一次移动会在上一次的基础上移动
• 鼠标悬停在轮播图上时清除定时器，离开时重新启动定时器

示例二：定时获取数据

$(document).ready(function() {
  setInterval(function() {
    $.ajax({
      url: 'http://localhost:3000/data',
      method: 'get',
      dataType: 'json',
      success: function(data) {
        $('#result').text(data.msg);
      },
      error: function() {
        console.log('请求数据失败');
      }
    });
  }, 3000);
});

解释：

• setInterval()方法每隔3秒钟执行一次匿名函数，定时获取数据
• 使用$.ajax()方法发送请求，获取服务器端数据
• 如果请求成功，将返回的消息文本放入页面中指定的元素中
• 如果请求失败，将在控制台中输出消息