防抖(debounce)

防抖函数常用于限制频繁触发的事件处理,例如在滚动条事件监听中,防止因频繁调用导致服务器性能下降。当图片加载时,防抖函数确保在一段时间内只执行一次refresh函数,提高效率。若无delay参数,由于计时器的异步特性,函数不会被多次执行。
摘要由CSDN通过智能技术生成

应用场景:滚动条事件监听

问题1:为什么需要使用防抖函数?举个例子

在项目中,我们可能需要通过监听图片的加载来重新获取(条用scroll.refresh函数)滚动的区域(scrollerHeight),我们一次请求的图片可能是很多张,而请求的速度也比较快,就会出现在短时间内频繁执行refresh函数,致使服务器性能降低。

解决方法:

       利用防抖函数,在某个时间期限内,事件处理函数只执行一次

    /*
     * 封装一个防抖函数
     * 防抖函数传入两个参数
     * 1.func [function] 需要防抖的函数refresh
     * 2.delay [number] 毫秒,防抖期限值
     */
    debounce(func, delay) {
      let timer = null;
      //...args是指refresh()传入的值可以是多个
      return function (...args) {
        //1.第一次图片请求加载的时候timer是null,所以不会执行if这个语句,
        //直接进入到计时器,然后开始计时
        //2.如果在第一次进入计时器时,在delay时间内又加载的图片
        //那么此时timer已经不为null了,会进入到if语句把timer清空,再重新计时
        if (timer) clearTimeout(timer);
        timer = set
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
lodash是一个JavaScript工具库,提供了许多实用的函数和工具来简化JavaScript开发。其中之一是`debounce`函数,用于创建一个防抖函数。 防抖函数是指在一定时间内连续触发的事件只执行一次,常用于处理频繁触发的事件,比如浏览器窗口的resize事件、输入框的输入事件等。防抖函数可以避免频繁触发导致的性能问题。 在lodash中,`debounce`函数的用法如下: ```javascript _.debounce(func, wait, options) ``` - `func`:要执行的函数。 - `wait`:等待时间(毫秒),即事件触发后,等待多长时间执行函数。 - `options`:可选参数对象,可以设置更多的选项,比如`leading`和`trailing`。 `leading`和`trailing`是两个布尔值选项: - `leading`:默认为`false`,表示禁用首次执行。如果设置为`true`,则第一次触发事件时立即执行函数。 - `trailing`:默认为`true`,表示在最后一次触发事件后,再等待一段时间执行函数。如果设置为`false`,则最后一次触发事件后不再执行函数。 下面是一个简单的示例,演示如何使用`lodash`的`debounce`函数: ```javascript function saveToServer() { // 模拟发送数据到服务器的操作 console.log("Saving data to server..."); } var debouncedSave = _.debounce(saveToServer, 1000); // 模拟触发事件 debouncedSave(); debouncedSave(); debouncedSave(); // 1秒后,只会执行一次保存操作 ``` 在上述代码中,`saveToServer`函数会被防抖处理,只有在最后一次触发事件后等待1秒后,才会执行一次保存操作。 希望这个例子能够帮助您理解`lodash`中的`debounce`函数。如果您有任何其他问题,请随时提问!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕千千Bebe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值