js的防抖与节流处理

防抖

一段时间内频繁触发函数的时候,只有停止时间长度足够才会执行一次

节流

在固定时间内执行一次,以标志来判断是否空闲而执行。


一些项目需要频繁触发的onmousemove,onchange等事件时,有可能会短时间内频繁的触发。这会降低系统的性能甚至造成卡顿情况的产生。这就需要防抖的处理。

防抖的意义在于,在用户停止输入或者长时间未输入的情况下。在限定的时间内只调用一次回调函数。


以下是我简单写的一个demo:


两种情况

1.用户在1s后滑动时进行翻页(防抖,只有用户再次滑动才会触发)

1)利用isNow记录是否执行,在1s内多次滑动只会不断清理上次生成的计时器和重新生成计时器,由于未达到waitTime,不会进行timer = null的执行

2)在1s不滑动后,会执行语句,这时timer值为null,则isNow的值会改变为true再次滑动时,实现回调函数的调用。

2.用户不再滑动后1s自动翻页(节流,只要用户停止滑动后一定会间隔一段时间触发一次)

1)利用onmousemove事件,滑动计数。debounce函数中产生闭包,利用计时器,在鼠标移动的过程中不断进行清除上一次计时器重新生成新的计时器(在这个过程中是没有调用回调函数的,因为计时器始终未到达1s就被清除)

2)在鼠标停止移动1s后自动触发回调函数进行翻页。

初始化:


核心处理:

1.传参为回调函数cb,等待时间waitTime,是否立即触发(情况1,2,true为1,false为2)immde



  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 JavaScript 中,防抖(debouncing)和节流(throttling)是两种优化高频率触发事件的方法,可以减少代码的执行次数,提高性能。 防抖 防抖是指在事件被频繁触发时,只有在一定时间内没有新的触发事件才会执行事件处理函数。在这段时间内,如果事件又被触发,则重新计时。 防抖的实现思路是:在事件处理函数执行前,设置一个定时器,如果在定时器时间内再次触发了事件,则清除原定时器并重新设置一个新的定时器,如此反复。如果在定时器时间内没有再次触发事件,则执行事件处理函数。 防抖的应用场景包括:搜索框输入、窗口调整等需要频繁触发事件时,可以通过防抖来减少事件处理函数的执行次数。 示例代码: ```javascript function debounce(func, delay) { let timer = null; return function () { const context = this; const args = arguments; clearTimeout(timer); timer = setTimeout(function () { func.apply(context, args); }, delay); }; } const searchInput = document.getElementById("search-input"); const searchHandler = function () { console.log("执行搜索操作"); }; searchInput.addEventListener("input", debounce(searchHandler, 500)); ``` 上面的代码中,`debounce` 函数接受一个事件处理函数和一个时间间隔作为参数,返回一个新的函数,这个新函数在被调用时会执行事件处理函数,但是在执行前会设置一个定时器,如果在时间间隔内再次被调用,则会清除原定时器并重新设置一个新的定时器。 节流 节流是指在事件被频繁触发时,只有在一定时间间隔内执行一次事件处理函数。在这段时间内,如果事件又被触发,则忽略这次触发。 节流的实现思路是:在事件处理函数执行前,判断距离上一次执行的时间间隔是否超过了指定的时间间隔,如果超过了,则执行事件处理函数并更新上一次执行时间;否则忽略这次事件触发。 节流的应用场景包括:页面滚动、DOM 元素拖拽等需要频繁触发事件时,可以通过节流来减少事件处理函数的执行次数。 示例代码: ```javascript function throttle(func, delay) { let lastTime = 0; return function () { const context = this; const args = arguments; const now = new Date().getTime(); if (now - lastTime >= delay) { func.apply(context, args); lastTime = now; } }; } const scrollHandler = function () { console.log("执行页面滚动操作"); }; window.addEventListener("scroll", throttle(scrollHandler, 500)); ``` 上面的代码中,`throttle` 函数接受一个事件处理函数和一个时间间隔作为参数,返回一个新的函数,这个新函数在被调用时会执行事件处理函数,但是在执行前会判断距离上一次执行的时间间隔是否超过了指定的时间间隔,如果超过了,则执行事件处理函数并更新上一次执行时间;否则忽略这次事件触发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值