22、jQuery与Ajax实战：实时页面更新与数据处理

咖啡JSON

于 2025-11-25 13:51:47 发布

阅读量8

点赞数

CC 4.0 BY-SA版权

分类专栏： Head First jQuery精要解读文章标签： jQuery Ajax 实时页面更新

本文链接：https://blog.youkuaiyun.com/i1j2k/article/details/155547290

Head First jQuery精要解读专栏收录该内容

31 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

jQuery与Ajax实战：实时页面更新与数据处理

1. 页面定时事件的问题与解决方案

在之前的开发中，我们使用 setTimeout 创建了一个不断调用产生闪电效果函数的“怪物”函数。然而，这带来了一些意外后果，当用户返回应用时，页面会失去焦点，视觉效果会相互叠加。由于我们需要等待前一次函数调用完成，所以不能切换到使用 setInterval 。

为了解决这个问题，我们可以利用条件逻辑。创建一个全局变量 repeat ，默认值为 true 。同时创建两个按钮， btnStop 和 btnStart ，分别用于停止和启动页面更新。以下是具体代码实现：

$(document).ready(function(){
  var FREQ = 10000;
  function startAJAXcalls(){
    setTimeout( function() {
      getXMLRacers();
      startAJAXcalls();
    }, FREQ);
  }
  var repeat = true;
  $("#btnStop").click(function(){
    repeat = false;
    $("#freq").html("Updates paused.");
  });
  $("#btnStart").click(function(){
    repeat = true;