Comments (7)
IntersectionObservers
的回调是异步执行的,但是也提供了同步调用的方法 IntersectionObserver.takeRecords()
。
每一个 IntersectionObserverEntry
都是 [[QueuedEntries]]。当观察到交互动作发生时,回调函数并不会立即执行,而是在空闲时期使用 requestIdleCallback
来异步执行回调函数,而且还规定了最大的延迟时间是 100 毫秒(???),相当于我么你的代码 1-100 毫秒内执行。
我们可以看一下 polyfill 的实现:
To enable polling for all instance, set a value for
POLL_INTERVAL
on the IntersectionObserver prototype:IntersectionObserver.prototype.POLL_INTERVAL = 100; // Time in milliseconds.Enabling polling for individual instance:
To enable polling on only specific instances, set a
POLL_INTERVAL
value on the instance itself:var io = new IntersectionObserver(callback); io.POLL_INTERVAL = 100; // Time in milliseconds. io.observe(someTargetElement);Note: the
POLL_INTERVAL
property must be set prior to calling the .observe method, or the default configuration will be used.
如果执行的是紧急任务,不想异步执行,可以调用同步方法 takeRecords()
在 Intersection Observers Explainer Doc 中有个显示广告的例子:
function visibleTimerCallback(element, observer) {
delete element.visibleTimeout;
// Process any pending observations
processChanges(observer.takeRecords());
if ('isVisible' in element) {
delete element.isVisible;
logImpressionToServer();
observer.unobserve(element);
}
}
如果异步的回调先执行了,那么当我们调用同步的 takeRecords()
方法时会返回空数组。同理,如果已经通过 takeRecords()
获取了所有的观察者实例,那么回调函数就不会被执行了。在规范中或者 polyfill 代码已经很清楚了。
综上:
IntersectionObserver
虽然优先级低,但是可以保证肯定会执行- 如果需要立即执行,可以使用同步的
takeRecords()
方法
from the-front-end-knowledge-you-may-not-know.
写了个demo, 比如 我要在滚动到离图片的位置多出300距离做操作, 就得在图片相邻的地方插入一个元素,或者在优化下用一个元素,但是增加了计算量 ,absolute且物理位置隐藏, 然后才能原有的效果。
相比较于,requestIdleCallback 做调度也能做不少事情。
不过这个api在一些需求上 确实很好使。
from the-front-end-knowledge-you-may-not-know.
很好的 +111
from the-front-end-knowledge-you-may-not-know.
不支持IOS是不是意味着不能做移动端了?
from the-front-end-knowledge-you-may-not-know.
有 polyfill
from the-front-end-knowledge-you-may-not-know.
摘录自IntersectionObserver’s Coming into View
IntersectionObservers deliver their data asynchronously, and your callback code will run in the main thread. Additionally, the spec actually says that IntersectionObserver implementations should use requestIdleCallback(). This means that the call to your provided callback is low priority and will be made by the browser during idle time. This is a conscious design decision.
从规范来看,IntersectionObserver
的实现应该使用requestIdleCallback
,那就是说IntersectionObserver
的优先级比较低,低优先级在什么情况下会造成什么问题吗?
from the-front-end-knowledge-you-may-not-know.
今天在 github trending 看到一个项目:stratiformltd/react-loadable-visibility
A wrapper around react-loadable and loadable-components to load elements that are visible on the page.
react-loadable-visibility 包装了 react-loadable 和 loadable-components,并且使用了
IntersectionObserver 当指定元素进入到 viewport 时加载组件。
参考
from the-front-end-knowledge-you-may-not-know.
Related Issues (20)
- Async Clipboard API:异步剪贴板 API HOT 3
- window.performance 性能对象 HOT 1
- navigator.vibrate 手机震动API
- Syntax Error of the Title HOT 1
- try-catch 退出 forEach 循环 HOT 10
- 用fetch在控制台测试接口 HOT 3
- 清空 input[type="file"] 的值 HOT 4
- pointer-events: none; 穿透当前元素,由“下面”的元素接收事件 HOT 4
- 利用 URLSearchParams 对象获取URL之中的查询字符串,即问号之后的部分 HOT 6
- 利用toString检测浏览器devTool是否为开启状态 HOT 7
- 面试题,css中哪些属性对页面repaint和reflow影响最大 HOT 4
- Array.isArray(Array.prototype) === true HOT 1
- 怎样阻止谷歌浏览器的密码提示? HOT 15
- 不打印出 console 信息出现在文件哪一行 HOT 1
- PC端 Vue-SPA项目 如何做好首屏渲染优化 HOT 3
- 获取图片原始尺寸 HOT 7
- [Docs] README 错别字 顾名思义
- 小技巧:已知年月,求该月共多少天? HOT 6
- 通过AbortController中止fetch请求后,如何判断返回的error是否属于AbortError? HOT 1
- 如何禁止 chrome 弹窗提示保存密码呢
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from the-front-end-knowledge-you-may-not-know.