微信小程序:函数节流与函数防抖

目录

问题引入:

定义

解决方案:函数节流

一、案例举例

1.页面展示

2.search.wxml标签展示

3.search.js展示

4.结果展示

二、函数节流解决问题

1.函数

2.实例应用

三、函数防抖解决问题

1.函数

2.原理

3.应用场景

4.应用实例

总结


问题引入:

在搜索框中,程序短时间内大量触发某函数而导致的性能下降。

定义

  • 节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
  • 防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时

解决方案:函数节流

  • 函数节流: 频繁触发,但只在特定的时间内才执行一次代码
  • 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码

一、案例举例

1.页面展示

2.search.wxml标签展示

html 复制代码
<input type="text"  bindinput="handleInputChange" />

3.search.js展示

javascript 复制代码
handleInputChange(event){
    console.log(event.detail.value)
}

4.结果展示

二、函数节流解决问题

1.函数

javascript 复制代码
setTimeout(() => {
   
}, 300);

2.实例应用

javascript 复制代码
//全局变量
let isSend = false;
// input 输入框
handleInputChange(event) {
    console.log(event.detail.value)
    this.setData({
      searchContent: event.detail.value.trim()
    });
    // 函数节流 防抖
    if (isSend) {
      return
    }
    isSend = true
    this.getSearchList()
    setTimeout(async () => {
      isSend = false
    }, 300);
  },
//请求方法
async getSearchList() {
    let searchListData = await request('/search', { keywords: this.data.searchContent, limit: 10 })
    this.setData({
      searchList: searchListData.result.songs
    })
  },

三、函数防抖解决问题

1.函数

javascript 复制代码
debounce: function (func, wait) {
    
    return () => {

      clearTimeout(timer);

      timer = setTimeout(func, wait);

    };

};
func:需要防抖的函数;
wait:number类型,setTimeout的时间参数;

2.原理

防抖的原理就是:你尽管触发事件,但是我一定在事件触发n秒无操作后才执行

3.应用场景

  • 表单验证
  • 搜索框输入查询
  • 滚动条滚动
  • 按键提交

4.应用实例

javascript 复制代码
function debounce(fn, interval) {
    let timer;
    let delay = interval || 500; // 间隔的时间,如果interval不传,则默认1秒
    return function () {
        let that = this;
        let args = arguments; // 保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(that, args); // 用apply指向调用debounce的对象,相当于this.fn(args);
        }, delay);
    };
}

总结

  • 函数节流与函数防抖节约计算机资源,提升用户体验
  • 节流一般是用在必须执行这个动作,但是不能够执行太频繁的情况下
  • 防抖一般是用来,用户输入有操作时,暂时不执行动作,等待没有新操作时,进行相应响应
  • 函数防抖与节流都可以解决频繁使用计算机资源的问题
相关推荐
gqkmiss11 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃16 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰20 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye27 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm29 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生2 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互