JavaScript高级函数应用之分时函数实例分析

JavaScript高级函数应用之分时函数实例分析

分时函数是一种常见的优化技术，它可以在页面实际需要使用某些资源时再进行加载，避免了一开始就加载所有资源，造成不必要的浪费。以下是分时函数的简单实现：

function timeChunk(arr, fn, count) {
  const len = arr.length; // 获取要迭代的数组长度
  let start = 0; // 设置迭代的起始位置
  let timer; // 定义定时器

  function process() {
    let end = start + count; // 计算当前迭代结束的位置
    if (end > len) {
      end = len;
    }
    for (let i = start; i < end; i++) { // 执行循环操作
      fn.call(arr[i], arr[i], i); // Array.prototype.unshift.call(arr,arr[i])
    }
    start = end; // 更新起始位置

    if (start < len) { // 如果还有待处理的元素
      timer = setTimeout(process, 1000); // 创建定时器
    }
  }

  return process;
}

以上分时函数会接收三个参数，分别是要迭代的数组、每一项需要执行的函数和每个时间段需要处理的数量。

实例分析一

现在有一个需求，需要将一个长度为 10000 的数组中的每一项都添加到页面的某个 div 中。使用分时函数可以避免一次性添加产生的页面卡顿现象。

以下是具体实现：

const data = Array.from({ length: 10000 }).map((_, i) => i);
const div = document.createElement("div");
document.body.appendChild(div);

function addNum(num) {
  const p = document.createElement("p");
  p.innerText = num;
  div.appendChild(p);
}

const timeAddNum = timeChunk(data, addNum, 100); // 每隔 100ms 执行 100 次操作
timeAddNum(); // 执行

以上实现会先生成一个长度为 10000 的数组，然后调用 timeChunk 进行分时处理。每隔 100ms 执行一次循环，每次循环会执行 100 次 addNum 函数，将每一项添加到页面上，避免了一次性添加的大量计算和渲染，保证了页面的流畅度。

实例分析二

再来看一个类似的需求，现在有一个需要延迟加载的图片数组，需要先显示默认占位图，当进入可视区域时再加载真实图片，为了避免初次打开页面时一次性加载所有图片导致页面卡顿，可以使用分时函数解决。

以下是具体实现：

const imgData = [
  "https://cdn.jsdelivr.net/npm/imagesloaded@4.1.4/images/1.jpg",
  "https://www.learnku.com/love/uploads/avatar/5974/1512716487.png",
  "http://image.nbd.com.cn/uploads/avatars/784413.jpeg"
];

const imgContainer = document.createElement("div");
imgContainer.setAttribute("id", "img-container");
document.body.appendChild(imgContainer);

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      resolve(url);
    };
    img.onerror = () => {
      reject(`图片加载失败：${url}`);
    };
    img.src = url;
  });
}

function addImg(url, index) {
  loadImage(url)
    .then(() => {
      const img = document.createElement("img");
      img.src = url;
      imgContainer.appendChild(img);
      console.log(`第 ${index + 1} 张图片加载完成：${url}`);
    })
    .catch((err) => {
      console.log(err);
    });
}

const timeAddImg = timeChunk(imgData, addImg, 1); // 每隔 1s 加载一张图片
window.addEventListener("scroll", () => {
  timeAddImg();
});

以上实现先创建一个图片数组，然后根据需要延迟加载的图片数量调用 timeChunk 函数进行分时处理，每隔 1s 加载一张图片，并添加到指定的容器中。当页面滚动时，会触发 timeAddImg 函数，每次添加一张图片，避免了一次性加载所有图片造成的卡顿现象。