react-debounce-intersection-observer
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

react-debounce-intersection-observer

[![Version Badge][npm-version-svg]][package-url] [![GZipped size][npm-minzip-svg]][bundlephobia-url] [![Test][test-image]][test-url] [![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url]

Fork 自 react-intersection-observer@9.0.0, 有完整的 react-intersection-observer所提供的功能,在其基础之上增加了 debounce 能力,主 要用于处理监听的目标元素非常多的情况;

如果监听的目标元素非常多,并且元素之间位置关联性不大,则在快速滚动时, intersection-observer中的 callback 会频繁触发,导致页面卡顿;这里的 debounce 是延缓 callback 的触发,并且支持对 callbacks 分批处理;

该文档仅对 debounce 功能做了说明,其他功能的详细文档还请 看react-intersection-observer

Features

  • 其他
  • 在 hooks 用法中,支持设置 callback 的 debounce 触发时间
  • 支持控制 callback 每批执行的数量;
  • 支持通过开关控制 debounce 是否开启,不开启就和 react-intersection-observer 的逻辑一致
  • inView 为 false 的 callback 放在 requestIdleCallback 中执行,因为大多数情况 下不在可视区域的元素中的逻辑是不重要的,要优先执行可视区域内的;
  • debounce 用法当前仅支持 threshold 为单个数字的用法;

待支持

⬜️ 支持 threshold 为数字数组的情况;

Installation

Install using Yarn:

yarn add react-debounce-intersection-observer

or NPM:

npm install react-debounce-intersection-observer --save

Usage

function View(props: { isStartDebounce: true }) {
  const { ref, inView } = useInView({
    threshold: 0,
    debounceOptions: {
      wait: 200,
      renderCount: 1,
      start: () => {
        return props.isStartDebounce;
      },
    },
  });

  return (
    <div ref={ref}>
      <div>content</div>
      {inView && <p>This is inView</p>}
    </div>
  );
}

注意 1: debounceOptions 是非响应式的,在 observer 实例创建后,debounce 也会 实例化;debounceOptions 在此之后发生变化也不起作用,使用的是第一次创建的 debounce 实例。

注意 2: 虽然 debounceOptions 是非响应式的,但是 start 方法会在每次 intersection observer 触发时调用一次,因此在 start 中可以通过配置全局变量的方式 控制 debounce 的开启;

{
  start: () => {
    return window.isStartDebounce === true;
  };
}

API

Options

Name Type Default Description
wait number 100 延迟时间,如果在 wait 时间内持续触发 callback 事件,这些 callback 是不会立即执行的;默认时间为 100ms
start boolean or () => boolean () => false 是否开启防抖,默认不开启,需要手动设置开启
renderCount number or undefined undefined 同一帧执行的 callback 数量;每一帧只会执行 renderCount个 callback;默认是全部执行;如果 callback 数量较多,建议根据执行逻辑设置一个合理的数值

How I Did

Package Sidebar

Install

npm i react-debounce-intersection-observer

Weekly Downloads

6

Version

1.0.0

License

MIT

Unpacked Size

293 kB

Total Files

40

Last publish

Collaborators

  • yingying.chang