您当前的位置: 首页 > 

王佳斌

暂无认证

  • 9浏览

    0关注

    821博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

uni-app - 节流与防抖(按钮节流、输入框防抖解决方案)

王佳斌 发布时间:2022-10-13 17:53:31 ,浏览量:9

前言

这对于前端的优化起到了非常重要的作用,本文将这两个技术通过函数进行封装,方便在项目中复用。

什么是节流? 用户网速较慢时,点击了按钮之后没有反应,用户会急忙再次点击(甚至狂点),如果不加以控制,服务器会通过前端收到多次请求(前一个请求还没处理完又请求了),差矣。用大白话说,就是在规定时间内,无论用户点击了多少次, 函数只触发一次。

什么是防抖? 用户在搜索框中输入关键字搜索时,一般都会绑定 @input 事件,这就意味着每次当输入框内容变化(动作)时就会触发函数(发起网络请求),这无疑会造成带宽浪费,差矣。用大白话说,就是在规定时间内,用户导致动作被连续频繁触发的情况下,函数只会被执行一次。

函数封装

建议您在 static 目录下新建一个 tools.js,后续可以将所有的工具函数都封装在此。

一键复制或选择性复制以下代码。

/**
 * 函数节流
 * @description 在规定时间内 无论用户点击了多少次 函数只触发一次
 * @param {Function} func - 要节流的函数
 * @par
关注
打赏
1665568777
查看更多评论
立即登录/注册

微信扫码登录

0.0411s