防抖节流与图片懒加载：JS实战妙用

2023-12-26 08:09:21

在编写前端代码时，防抖和节流是两个非常实用的技术。它们可以帮助我们提高应用程序的性能，并改善用户体验。

防抖和节流

防抖和节流都是用于控制函数执行频率的技术。

防抖：防抖函数会在指定的时间段内只执行一次。如果在时间段内函数被多次调用，那么只有最后一次调用会被执行。
节流：节流函数会在指定的时间段内只执行一次。如果在时间段内函数被多次调用，那么只有第一次调用会被执行。

防抖的实现

function debounce(func, wait) {
  let timeout;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

节流的实现

function throttle(func, wait) {
  let lastTime = 0;
  return function () {
    let context = this;
    let args = arguments;
    let now = new Date().getTime();
    if (now - lastTime < wait) {
      return;
    }
    lastTime = now;
    func.apply(context, args);
  };
}

图片懒加载

图片懒加载是一种延迟加载图片的技术。它可以帮助我们提高网页的性能，并改善用户体验。

图片懒加载的原理很简单：

将图片的 src 属性设置为一个占位符。
当图片进入视口后，再将图片的 src 属性设置为真正的图片地址。

图片懒加载的实现

function lazyLoad() {
  let images = document.querySelectorAll('img[data-src]');
  images.forEach((image) => {
    let observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          image.src = image.dataset.src;
          observer.unobserve(image);
        }
      });
    });
    observer.observe(image);
  });
}