小程序频繁操作-函数防抖（以及使用场景）

小程序函数防抖（以及它们的使用场景）

函数防抖：延迟函数执行,无论函数触发多久，只在函数最后一个触发时才定义setTimeout
用途：常用在input输入时、点赞、取消点赞等场景
函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码

先看没有使用函数防抖效果图

当每次在输入值的时候都会多次触发，解决该问题的方式请先看下图

同样是触发了多次，但是已经解决了多次触发显示的问题

具体请看下面的代码

• 封装public.js

module.exports={
  debounce: function debounce(fn, interval) {
    var timer;
    var time = interval || 1000;//延迟时间，如果interval不传默认1000ms
    return function () {
      clearTimeout(timer);
      var context = this;
      var args = arguments;//保存arguments，因为setTimeout是全局的
      timer = setTimeout(function () {
        fn.call(context, args);  //call方法是改变this的指向，第二个参数可以传递任意值
      }, time);
    };
  }
}

• wxml

<!--pages/debounce/debounce.wxml-->
<input style="border:1px solid #ccc;width:150px;" bindinput="handleInput" placeholder="请输入账号"></input>

• js

// pages/debounce/debounce.js
var debounce = require('../debounce/public.js')
Page({
  /**
   * 页面的初始数据
   */
  data: {
    
  },
  // 用户输入时触发的事件    通过函数防抖解决多次触发
  handleInput: debounce.debounce(function (e){
    console.log(e[0].detail.value)
  }, 1500),
})