函数防抖与节流

最新推荐文章于 2024-09-12 17:43:39 发布

mini猪

最新推荐文章于 2024-09-12 17:43:39 发布

阅读量272

点赞数 3

本文链接：https://blog.csdn.net/v610379640/article/details/124569741

版权

1.函数防抖:单位时间内,频繁触发事件,只会触发最后一次

2.经典场景 : 输入框实时输入 oninput

*减少触发输入的频率,提高代码性能

3.防抖流程:

(1)声明一个全局timeID存储定时器ID

(2)每一次触发事件,先清除上一次定时器,以本次触发为准

(3)开启本次定时器

代码如下:

在input框中,1秒内输入的内容将不会被输出到控制台,一秒以外的将会被输出到控制台.

1.函数节流 : 单位时间内，频繁触发事件，只会触发一次

2.应用场景 : 降低高频事件触发频率

* 鼠标移动: onmousemove

* 滚动条事件: onscroll

节流流程

(1)声明一个全局变量记录本次触发时间

(2)每一次触发事件的时候, 获取当前时间

(3)判断当前时间 - 上一次触发事件 >= 节流间隔

(4)存储本次触发事件，用于下一次判断

代码如下:

运行结果如下:随着滚动条的滚动触发

最后祝大家天天开心o(*￣︶￣*)o

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mini猪

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

小程序的onPageScroll函数防抖与函数节流

weixin_41390717的博客

06-26

6456

微信小程序的onPageScroll监听高度执行函数防抖与函数节流

微信小程序——监听页面滑动（二）判断用户在做向上滑动还是向下滑动（onScrollPage scroll-view）

XSL_HR的博客

06-01

5900

手把手教你通过监听页面滑动判断用户是在上滑还是在下滑

2 条评论您还未登录，请先登录后发表或查看评论

函数节流与防抖

qq_46956509的博客

12-10

1007

函数防抖事件被触发后，在一定时间内再次触发，则以后一次触发为标准重新计算时间，直到这段时间内没有二次触发，才执行。 1、无防抖代码 //html代码 <input id="unDebounce"> //script代码 //模拟一段ajax请求 function ajax(content) { console.log('ajax request ' + content) } let inputa = document.getElementById('unDebounce')

微信小程序中事件触发机制及防抖节流

最新发布

qq_40791475的博客

09-12

2146

微信小程序中的事件触发机制在高频交互场景下，可能导致性能瓶颈。通过防抖和节流技术，开发者可以优化事件的触发频率，减少资源消耗。本文详细介绍了防抖与节流的概念、应用场景及具体实现方式，并结合实际开发中的场景进行了代码演示。同时分析了不同的传参方式及其优缺点，帮助开发者灵活应对复杂的交互需求。

函数防抖与函数节流

weixin_45894503的博客

04-21

362

函数防抖定义:指触发事件后，函数在 n 秒后只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。应用场景: 1. 搜索框搜索输入。只需用户最后一次输入完，再发送请求； 2. 用户名、手机号、邮箱输入验证； export function debouce(fn, delay){ let timer = null return function() { clearTimeout(timer) let arg = argument timer = setTimeout.

uniapp微信小程序scroll-view滚动scrollLeft不准确

T3165919332的博客

07-26

2525

但是这种方法会影响性能，这是因为关闭节流后,onScroll 事件会在每次滚动时触发,可以提高滚动位置监测的精确度。但需要注意的是,这会增加一定的性能消耗,如果滚动区域很大,滚动频繁,会带来较大的计算压力。所以在复杂场景下,我们还是建议保留系统的节流行为。原因：因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流，可以在scroll-view 加一个。今天在实现微信小程序的一个横向导航的时候出现了一个问题，就是每次滑到滚动条最右边的时候。如果不想消耗过多性能,又想实现精确的滚动监听，怎么办？

函数防抖和节流

qq_50906507的博客

11-16

825

函数防抖和节流

浅析JavaScript 函数防抖和节流

01-19

函数防抖和节流都是对高频动作触发回调函数的一个优化，实现方式上有类似之处。先从使用场景做个区分。防抖使用场景：表单输入框校验提交按钮避免重复提交节流使用场景： scroll,mousemove,resize等函数防抖...

JS工具类函数之函数防抖与节流

Sodaxiang的博客

12-05

206

在开发中，遇到一些频繁触发的事件，如window.onresize,window.onmousemove，window.onscroll等，或是实时输入模糊搜索需要不断向服务器发送数据的类场景，一般都会用到函数防抖与节流。那么，什么是函数防抖与节流呢？ 1.函数防抖函数防抖：函数需要频繁触发时，只有足够空闲的时候，才会执行一次。好像公交司机会等人都上车后才会开车一样.。应用场景：实时搜索，拖拽等。实现原理：第一次调用函数时，创建一个定时器，然后在指定时间之后再调用该函数。 function

前端性能优化07_函数防抖与节流

Web前端开发工程师

09-24

186

函数防抖(debounce) 概念：在事件被触发n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。生活中的实例：电脑无操作1分钟之内如果没有操作会进入休眠，当第40秒时鼠标被移动一下，重新计时1分钟。实现：定时器。应用：搜索时等用户完整输入内容后再发送查询请求。 let inputNode = document.getElementById('user_input'); let timer; inputNode.addEventListener('keyup',function

如何解决js函数防抖、节流出现的问题

12-10

React中使用防抖函数和节流函数在React事件调用时，React传递给事件处理程序是一个合成事件对象的实例。SyntheticEvent对象是通过合并得到的。这意味着在事件回调被调用后，SyntheticEvent 对象将被重用并且所有...

微信小程序scroll-view下拉刷新与上拉加载更多

shi450561200的博客

12-09

2322

或者 overflow-y: scroll 否则scroll-view上的方法不起作用。

微信小程序使用scroll-view导致吸顶无效或vant-sticky吸顶无效

rb0518的博客

08-27

4984

记录一次在做 微信小程序开发时，在没有使用scroll-view的时候，我们使用vant-sticky做吸顶效果的时候可以正常使用。在做回到顶部时，需要拿到实时的滚动距离，这时候就得使用上scroll-view了。我们可以看到Vant Weapp也是非常的细心，帮我们做了解答。但是当我们使用scroll-view时，突然发现吸顶失效了。属性可以实现在 scroll-view 内嵌套使用。我们先清楚为什么要使用scroll-view？好了，是不是非常简单，有任何问题欢迎下方评论。...

uni-app微信小程序onPageScroll事件中使用节流函数无效解决方案

CSDN for recording problems

06-20

3918

最近做一个微信小程序图片懒加载的方法，在onPageScroll事件中直接添加了节流函数并执行，但是并没有节流，一顿检查测试节流函数和自己需要节流的函数都是没有问题，居然在节流函数中没有走return函数，因此没有调用成功，开始时这么写的，按照普通正常的操作：节流函数： export function throttle(fn, gaptime) { if (gaptime == null || gaptime == undefined) { gaptime = 200 } let _last.

微信小程序scroll事件/onPageScroll事件的延迟问题

w001yy的博客

06-15

7842

需求在前端开发中，我们经常会遇到一个需求，在页面进行滚动操作的时候，当页面其中的某个元素滚动到某个位置，我们就让该元素停留在该位置。等到滚动小于某个值的时候，再让该元素继续随着页面滚动。这就是我们平时说的吸顶效果。实现方法实现思路：定义一个isFixed属性，设置该属性的样式为position:fixed,当滚动到某个高度时，设置position:fixed样式，用滚动来监听事件，微信小程序中有onPageScroll事件，然后通过scrollTop值来设置isFixed 问题：如果我们单纯设置这样

微信小程序（三十八）滚动容器

不起眼小菜菜的博客

02-07

1058

注释很详细，直接上代码……

JS函数节流和函数防抖问题分析

10-18

JavaScript中的函数节流（throttle）和函数防抖（debounce）是两种常见的优化策略，它们主要用于控制函数的执行频率，以避免在高频率事件触发时导致性能问题或不必要的资源消耗。函数防抖（debounce）的核心思想是...

函数防抖与节流，js中的事件循环机制

Hazel928的博客

03-12

182

###函数防抖与节流前言：下列场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃： window对象的resize、scroll事件拖拽时的mousemove事件射击游戏中的mousedown、keydown事件文字输入、自动完成的keyup事件节流throttle。如果是第一次调用该函数，那么会马上调用func，否则就会记录当前时刻，当第二次调用的时间间隔超过wait时，才调用func。防抖debounce。当调用动作n毫秒后才会执行该动作，

微信小程序-解决scroll-view抖动

weixin_44943268的博客

06-21

9386

微信小程序scroll-view抖动原因：产品需要点击换一换，列表置顶并刷新，所以需要动态绑定scroll-view里面的scrollTop属性 scrollTop属性用法需要保存@scroll时的值，如果在@scroll时直接复制给scrollTop的话就会出现页面抖动解决：@scroll时复制给一个变量，点击换一换时再将变量赋值给scrollTop ...