uView throttle & debounce节流防抖

简介: uView throttle & debounce节流防抖
何谓节流和防抖?
  • 节流
    节流的意思是,规定时间内,只触发一次。比如我们设定500ms,在这个时间内,无论点击按钮多少次,它都只会触发一次。具体场景可以是抢购时候,由于有无数人 快速点击按钮,如果每次点击都发送请求,就会给服务器造成巨大的压力,但是我们进行节流后,就会大大减少请求的次数。
  • 防抖
    防抖的意思是,在连续的操作中,无论进行了多长时间,只有某一次的操作后在指定的时间内没有再操作,这一次才被判定有效。具体场景可以搜索框输入关键字过程中实时 请求服务器匹配搜索结果,如果不进行处理,那么就是输入框内容一直变化,导致一直发送请求。如果进行防抖处理,结果就是当我们输入内容完成后,一定时间(比如500ms)没有再 输入内容,这时再触发请求。

结合以上两种情况,回到我们最实际的场景,比如防止表单提交按钮被多次触发,我们应该选择使用节流而不是防抖方案。

温馨提示

uView内置的按钮组件u-button内部已做节流处理(1.5.8版本),无需外部再做节流处理。配置throttle-time参数,可以设置节流的时间,详见Button 按钮

#节流

#throttle(func, wait = 500, immediate = true)

规定时间内,只触发一次,可以通过设置immediate来决定触发的时机在这个时间的开始,还是结束的时候执行。

  • func <Function> 触发回调执行的函数
  • wait <Number> 时间间隔,单位ms
  • immediate <Boolean> 在开始还是结束处触发,比如设置wait为1000ms,如果在一秒内进行了5次操作,只触发一次,如果immediatetrue,那么就会在第一次操作 触发回调,如果为false,就会在第5次操作触发回调。
<template>
    <view class="">
    <!-- 此处用法为在模板中使用,无需写this,直接$u.throttle()即可 -->
      <view class="throttle" @tap="$u.throttle(btnAClick, 500)">
        露从今夜白
      </view>
      <view class="throttle" @tap="btnBClick">
        月是故乡明
      </view>
    </view>
</template>
<script>
    export default {
        methods: {
            btnAClick() {
        console.log('btnClick');
      },
      btnBClick() {
        // 此处用法为在js中调用,需要写uni.$u.throttle()
        uni.$u.throttle(this.toNext, 500)
      },
      toNext() {
        console.log('btnBClick');
      }
        }
    }
</script>
<style lang="scss">
    .throttle {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100rpx;
    border: 1px solid $u-type-primary;
  }
</style>

copy

#防抖

#debounce(func, wait = 500, immediate = false)

在连续的操作中,无论进行了多长时间,只有某一次的操作后在指定的时间内没有再操作,这一次才被判定有效

  • func <Function> 触发回调执行的函数
  • wait <Number> 时间间隔,单位ms
  • immediate <Number> 在开始还是结束处触发,如非特殊情况,一般默认为false即可
<template>
    <view class="">
    <!-- 此处用法为在模板中使用,无需写this,直接$u.debounce()即可 -->
      <view class="debounce" @tap="$u.debounce(btnAClick, 500)">
        露从今夜白
      </view>
      <view class="debounce" @tap="btnBClick">
        月是故乡明
      </view>
    </view>
</template>
<script>
    export default {
        methods: {
            btnAClick() {
        console.log('btnClick');
      },
      btnBClick() {
        // 此处用法为在js中调用,需要写uni.$u.debounce()
        uni.$u.debounce(this.toNext, 500)
      },
      toNext() {
        console.log('btnBClick');
      }
        }
    }
</script>
<style lang="scss">
    .debounce {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100rpx;
    border: 1px solid $u-type-primary;
  }
</style>
相关文章
|
容器
UniApp scroll-view 事件不生效(@scroll、@scrolltolower、@scrolltoupper ...)
UniApp scroll-view 事件不生效(@scroll、@scrolltolower、@scrolltoupper ...)
2660 0
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载
689 0
|
小程序 开发者
体验版小程序为何无法访问云端服务器后端接口(请求失败...(已完美解决附加图片))?
体验版小程序为何无法访问云端服务器后端接口(请求失败...(已完美解决附加图片))?
919 0
|
10月前
|
数据采集 自然语言处理 NoSQL
Qwen for Tugraph:自然语言至图查询语言翻译大模型微调最佳实践
在图数据库的应用场景中,自然语言至图查询语言的高效转换一直是行业中的重要挑战。本次实践基于阿里云 Qwen 大模型,围绕 TuGraph 图数据库的需求,探索并验证了一套高效的大模型微调方案,显著提升了模型生成 Cypher 查询语句的能力。通过数据清洗、两阶段微调方法以及两模型推理框架等一系列创新策略,我们成功解决了图查询语言翻译任务中的核心问题。本文将从背景与目标、数据准备与清洗、微调框架设计、Prompt设计与优化、模型推理、最佳实践效果以及前景展望等六个部分出发,向读者逐步介绍我们的方案。
|
SQL 前端开发
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(五)
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(五)
616 0
|
12月前
|
移动开发 安全 API
微信H5支付--微信JS-SDK支付--点金计划
本文详细介绍了微信H5支付和JS-SDK支付的原理、配置和开发流程,涵盖了H5支付在移动端浏览器外唤起微信支付的细节,以及JS-SDK支付在微信内置浏览器中完成支付的相关注意事项。文章还针对微信支付常见问题,提供了解决方案和代码示例。最后,文章深入解析了微信支付点金计划,包括商家小票的自定义开发、API接口以及支付成功后的页面展示逻辑,为开发者提供了完整的开发参考。
735 0
微信H5支付--微信JS-SDK支付--点金计划
|
设计模式 测试技术
"揭秘!Service层接口之谜:你的项目究竟该不该‘接口化’?一文带你走出设计迷雾!"
【8月更文挑战第11天】在软件开发中,分层设计确保了项目的清晰与可维护性。Service层作为核心,其是否应实现接口一直是热议话题。支持者认为接口能解耦系统、便于测试并提供灵活性;反对者则担心增加复杂度与冗余。通过示例对比直接实现与基于接口的设计,本文探讨了不同场景下的最佳实践,强调设计应根据项目规模与需求权衡,旨在实现架构的平衡。
234 4
|
JavaScript 小程序
微信小程序 - 调用自定义组件内部方法
微信小程序 - 调用自定义组件内部方法
688 0
|
安全 API
预检请求:为跨域请求保驾护航(上)
预检请求:为跨域请求保驾护航(上)
|
前端开发
vue3父子传值实现弹框功能
vue3父子传值实现弹框功能