问: 我有一个调用自己的函数: def get_input(): my_var = input('Enter "a" or "b": ') if my_var !...: Type "a" or "b": a got input: a 但是,如果我输入别的东西,然后输入 "a" 或 "b",我会得到这样的结果: Type "a" or "b": purple You...Type "a" or "b": a got input: None 我不明白为什么 get_input() 函数返回的是 None,因为它本应只返回 my_var。这个 None 是从哪里来的?...我该如何修复我的函数呢? 答: 它返回 None 是因为当你递归调用它时: if my_var != "a" and my_var !...Python3 documentation 因此,除了在 if 语句中调用 get_input() 之外,还需要返回递归调用返回的内容。
奇怪的Java题:为什么128 == 128返回为false,而127 == 127会返回为true? 在回答这个问题之前,我们先来看看int和Integer的对比,一步步揭开问题的答案。...,其内存地址不同 (2) Integer变量和int变量比较时,只要两个变量的值是相等的,则结果为true。...(3) 非new生成的Integer变量和new Integer()生成的变量比较时,结果为false。...为了编程的方便还是引入了基本数据类型,但是为了能够将这些基本数据类型当成对象操作,Java为每 一个基本数据类型都引入了对应的包装类型(wrapper class),int的包装类就是Integer,...加大对简单数字的重利用,Java定义在自动装箱时对于值从–128到127之间的值,它们被装箱为Integer对象后,会存在内存中被重用,始终只存在一个对象。 2.
/bin/kafka-run-class.sh kafka.tools.GetOffsetShell --time ,但是我在测试的时候,发现有的时间戳会获取不到offset,是空...根据上面图片,举几个例子: 当 time 为 2020-09-16 11:59:20 时,获取的 offset 值为空。...当 time 大于等于 2020-09-16 12:00:20 并且 time 小于 2020-09-16 14:09:24 时,获取的 offset 值为 0,匹配的是 xxx.log 文件名称的那个...当 time 大于等于 2020-09-16 14:09:24 时,获取的 offset 值为 1049942,匹配的是 xxx.log 文件名称的那个 offset 。...三、调用 kafka java api 获取时间戳对应的 offset,并封装成工具脚本 很纳闷,为什么官方不提供获取时间戳对应的精准的 offset 呢?
IntersectionObserver API使我们能够检查一个给定的元素是否与文档相交。 useIsInViewport钩子接收一个指向我们想要追踪的元素的ref对象。...我们调用observe()方法,将我们要跟踪的元素传给它 - observer.observe(ref.current)。...setIsIntersecting(entry.isIntersecting), ) 如果我们设置ref对象的元素在视口中,useIsInViewport钩子将会返回true。...如果元素不在视口中,该钩子将会返回false。 需要注意的是,在初始渲染时,useIsInViewport 钩子将会返回false 。因为我们为useState传递的初始值为false。...const [isIntersecting, setIsIntersecting] = useState(false); 如果你想跟踪钩子的返回值的变化,请使用useEffect钩子,并将该值添加到钩子的依赖关系中
问题背景 我司某客户最近在检查一批新安装的 MySQL 数据库时,发现了下面的现象: 该批次的 MySQL 客户端字符集全部为 Latin1 ; 而之前使用同样参数模板部署的 MySQL ,客户端字符集却为...utf8 ; 已知 MySQL 版本为 5.7.32 ,服务器操作系统为 Redhat 7 ,那么为什么两次安装的 MySQL 字符集会不一样呢?...Client时,会根据character_set_results进行编码,然后再返回,因此也需要和character_set_client保持一致; 也就是说,控制 Client 级别字符集的三个参数需要一致...Latin1 [qinguangfei0511-5.png] 那么,为什么会这样呢,我们看下官方文档上是怎么说的:https://dev.mysql.com/doc/refman/5.7/en/charset-connection.html...参数指定; 控制 MySQL Client 级别字符集的三个参数需要保持一致,一般来说为utf8(MySQL 8.0 为 utf8mb4),同时又与 MySQL Client 所在服务器的字符集有关;
问题背景 我司某客户最近在检查一批新安装的 MySQL 数据库时,发现了下面的现象: 该批次的 MySQL 客户端字符集全部为 latin1 ; 而之前使用同样参数模板部署的 MySQL ,客户端字符集却为...utf8 ; 已知 MySQL 版本为 5.7.32 ,服务器操作系统为 Redhat 7 ,那么为什么两次安装的 MySQL 字符集会不一样呢?...Client 时,会根据 character_set_results 进行编码,然后再返回,因此也需要和 character_set_client 保持一致; 也就是说,控制 Client 级别字符集的三个参数需要一致...=utf8mb4 最后,又查看了服务器上操作系统的字符集,发现有问题的为 en_US ,而原先的为 en_US.UTF-8 好像找到了问题出在哪里,测试环境验证下,果然当服务器字符集设置为 en_US...后,MySQL 客户端字符集变为了 latin1 那么,为什么会这样呢,我们看下官方文档上是怎么说的:https://dev.mysql.com/doc/refman/5.7/en/charset-connection.html
构造函数 new IntersectionObserver(callback, options); 2. callback 发生交叉的回调,接受一个entries参数,返回当前已监听并且发生了交叉的目标集合...(后面会举例说明为什么是"且发生了交叉"): new IntersectionObserver(entries => { entries.forEach(item => console.log(item...为什么要举例以上两种情况呢,因为entries是返回当前已监听并且发生了交叉的目标集合,第一种情况,大家都一起发生交叉,固每次返回的集合长度都为三;第二种情况则是每个目标轮流发生交叉,且当前只触发了一个...,所以每次返回的集合长度只有一✅ 3....04 浏览器兼容性 IE不兼容,不过有官方的polyfill,链接地址为:https://github.com/w3c/IntersectionObserver/tree/master/polyfill
我当时很纳闷为何一个滚动吸顶会有 bug,后来我查看代码才发现直接用的是 offsetTop 这个属性,而且并没有做兼容性处理。...后来在项目中总会遇到滚动吸顶的效果需要实现,现在我将我知道的 4 种滚动吸顶实现方式做详细介绍。...(保存变量); 在使用的时候可能出现 DOM 没有初始化,就读取了该属性,这个时候会返回 0;对于这个问题我们需要等到 DOM 元素初始化完成后再执行。...二、吸顶效果不能及时响应 这个问题是我比较头痛,之前我没有在意过这个问题。直到有一天我用美团点外卖的时候,我才开始注意这个问题。...总结: 这种 IntersectionObserver 和 throttle 结合的方案不失为一种可选择的方案,这种方案的优点就在于可以有效地减少页面 reflow 的风险,不过缺点也是有的,需要牺牲页面的平滑度
但你可能会想 为什么我要解释所有这些概念,我们将需要使用观察者来查看用户是否在页面底部,以便传递下一个页面参数时获取新数据。所以,是的!...首先,我验证状态是否为 Loading,如果是,我简单地不返回任何内容并退出该函数。现在我验证我是否已经拥有 IntersectionObserver 的实例。...如果已经有,我会断开连接,因为我不想创建观察者的多个实例。现在如果我们没有。让我们将箭头函数的参数new IntersectionObserver()传递给它。...如果所有这些条件都得到验证,我将调用fetchNextPage()该useInfiniteQuery函数返回的值。现在让我们传递观察引用node。就是这样!一个小怪物,不是吗?...pages.reduce((acc, page) => { return [...acc, ...page]; }, []); }, [data]);现在让我们验证并返回可能的状态并返回值
大白话详解Intersection Observer API 昨天我写了Vue2 中自定义图片懒加载指令这篇博客,文章数据很好,阅读量可以上千,对于我这个刚写博客一周的新博主来说,是何等的荣幸。...observer --- 返回被调用的IntersectionObserver实例。...如:[0,0.25,0.5,0.75,1]表示目标元素在跟元素的可见程度每多 25% 就执行一次回调 该函数的返回值: 一个新的IntersectionObserver对像。...intersectionRatio 返回目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为 1,完全不可见时小于等于 0 time 返回一个记录从...IntersectionObserver API 使用教程 结语 这是我目前所了解的知识面中最好的解答,当然也有可能存在一定的误区。
简单来说就是监听元素出现在根元素,IntersectionObserver接收两个参数,第一个是回调,第二个是配置项: new IntersectionObserver(handler, options...) let observer = new IntersectionObserver((entries, observer) => { }, { root: null, rootMargin: '0px...document.querySelector('#test1')) 总共有四个方法: observe()开始监听一个元素,可以同时监听多个 disconnect()停止监听所有 takeRecords()返回所有观察目标的对象数组...,因为IntersectionObserver API 是异步的,不随着目标元素的滚动同步触发。...当然,兼容性却是一个需要考虑的因素。 最后有个问题,我不知道为什么我初始化之后,一监听就会先进入回调,这个问题没有找到答案。
(callback, options); 首先调用浏览器原生构造函数 IntersectionObserver ,构造函数的返回值是一个 观察器实例 。...,如果此值设置为 false 或不设置,那么回调函数参数中 IntersectionObserverEntry 的 isVisible 属性将永远返回 false 。...如果 trackVisibility 设置为 true,则此值必须至少设置为 100 ,否则会报错(但是这里我也只是亲测出来的,并不知道为什么会设计成这样,如果有大佬了解请指教一下)。...,并且 delay 设置为大于 100 ,否则该属性将永远返回 false 。...观察器实例方法 通过此段代码来演示观察器实例方法,为了方便演示,我添加了几个对应的按钮。
前言 最近在学习的过程中发现了我之前未曾了解过的一些特性,发现有些很有趣并且在处理一些问题的时候可以给我一个新的思路。 这里我将这些特性介绍给大家。...void 运算符 void 运算符对给定的表达式进行求值,然后返回 undefined。 由于 void 会忽略操作数的值,因此在操作数具有副作用的时候使用 void 会更加合理。...使用 void 替换 undefined 由于 undefined 并不是 JavaScript 的关键字,所以我们在赋值某个变量为 undefined 时可能会有点意想不到的结果。...这也是为什么我们在很多源码中都能看到使用 void 替换 undefined。 IntersectionObserver 是什么?...IntersectionObserver 可以用来监听元素是否进入了设备的可视区域之内,而不需要频繁的计算来做这个判断。
背景 在上篇文章:记一次 「 无限列表 」滚动优化 中, 我介绍了「 如何优化一个无限滚动列表 」。 用到了懒加载方案, 一个关键点是:需要判断元素是否在当前视区。 我们今天就看看这个问题。...使用 Intersection Observer 判断元素是否在当前视区 Intersection Observer 是一种更高效的方式。 为什么这么说呢?...IntersectionObserver 就是为此而生的。 它让检测一个元素是否可见更加高效。...IntersectionObserver 能让你知道一个被观测的元素什么时候进入或离开浏览器的可见窗口。...从输出最有用的特性是: isIntersecting target intersectionRect isIntersecting:当元素与默认根(在本例中为视口)相交时,将为true. target:
构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点。...time:可见性发生变化的时间,是一个高精度时间戳,单位为毫秒 target:被观察的目标元素,是一个 DOM 节点对象 rootBounds:根元素的矩形区域的信息,getBoundingClientRect...()方法的返回值,如果没有根元素(即直接相对于视口滚动),则返回null boundingClientRect:目标元素的矩形区域的信息 intersectionRect:目标元素与视口(或根元素)的交叉区域的信息...它们各自的intersectionRatio图中都已经注明。 我写了一个 Demo,演示IntersectionObserverEntry对象。...var intersectionObserver = new IntersectionObserver( function (entries) { // 如果不可见,就返回 if (
前言 图片懒加载其实已经是一个近乎“烂大街”的词语了,在大大小小的面试中也会被频繁的问到,我在之前的面试中也被问到了图片懒加载的原因、实现方式及底层原理,但由于自己平时很少做“图片”相关的处理,对于“懒加载...今天,我将首先从浏览器底层渲染机制来剖析为什么要去做图片懒加载,之后我将带大家一起来看下目前主流的几种实现图片懒加载的方式及其实现原理,最后会做一个展望。...为什么要做图片懒加载 要问答这个问题,首先我们先来看下浏览器的底层渲染机制: 1、构建 DOM 树 2、样式计算 3、布局阶段 4、分层 5、绘制 6、分块 7、光栅化 8、合成 而在构建DOM的过程中如果遇到...该函数返回一个rectObject对象,该对象有 6 个属性:top, left, bottom, right, width, height;这里的top、left和css中的理解很相似,width、height...构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点。
属性IntersectionObserver.root只读,所监听对象的具体祖先元素element,如果未传入值或值为null,则默认使用顶级文档的视窗。...属性IntersectionObserver.rootMargin只读,计算交叉时添加到根root边界盒bounding box的矩形偏移量,可以有效的缩小或扩大根的判定范围从而满足计算需要,此属性返回的值可能与调用构造函数时指定的值不同...方法IntersectionObserver.takeRecords(),返回所有观察目标的IntersectionObserverEntry对象数组。...rootBounds:根元素的矩形区域的信息,是getBoundingClientRect方法的返回值,如果没有根元素即直接相对于视口滚动,则返回null。...intersectionRatio:目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为1,完全不可见时小于等于0。
现在,请注意 pokemon 和 error 取决于 status,因此它们可以是未定义的。如果 status 是 Loading,则只返回 status。...如果 status 是 Success,则返回 pokemon。如果 status 是 Error,则返回错误 message。...让我们根据状态将我们的 State 重新构造为三种类型:type PokemonLoading = { status: "Loading";};type PokemonSuccessState = {...可能为未定义的属性。...我希望你们喜欢并觉得这个 TypeScript 的提示/模式有用。我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!
+ 100 } 方法二 通过 getBoundingClientRect() 获取图片相对于浏览器视窗的位置 示意图如下: getBoundingClientRect() 方法返回一个 ClientRect...实例化后返回一个观察器,可以指定观察哪些 DOM 节点。...=> { console.log('我出现了!')...占 boundingClientRect 的比例,完全可见时为1,完全不可见时小于等于0 isIntersecting: 目标元素是否处于视口中 (2) option 假如我们需要特殊的触发条件,比如元素可见性为一半的时候触发...通过设置 option 的 threshold 改变回调函数的触发条件,threshold 是一个范围为0到1数组,默认值是[0],也就是在元素可见高度变为0时就会触发。
领取专属 10元无门槛券
手把手带您无忧上云