美文网首页
微信小程序 用函数实现 防抖 和 节流

微信小程序 用函数实现 防抖 和 节流

作者: hao_developer | 来源:发表于2022-08-10 10:15 被阅读0次

    1、百度搜索防抖和节流的含义,理解其意义

    2、了解小程序和其js封装位置

    3、在其根目录utils下创建 tool.js

    /*函数节流*/
    function throttle(fn, interval) {
      var enterTime = 0;//触发的时间
      var gapTime = interval || 300 ;//间隔时间,如果interval不传,则默认300ms
      return function() {
        var context = this;
        var backTime = new Date();//第一次函数return即触发的时间
        if (backTime - enterTime > gapTime) {
          fn.call(context,arguments);
          enterTime = backTime;//赋值给第一次触发的时间,这样就保存了第二次触发的时间
        }
      };
    }
     
    /*函数防抖*/
    function debounce(fn, interval) {
      var timer;
      var gapTime = interval || 1000;//间隔时间,如果interval不传,则默认1000ms
      return function() {
        clearTimeout(timer);
        var context = this;
        var args = arguments;//保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
        timer = setTimeout(function() {
          fn.call(context,args);
        }, gapTime);
      };
    }
     
    export default {
      throttle,
      debounce
    };
    

    4、调用

    import tool from "../../until/tool.js";
    Page({
       data:{
        win_scrollTop:0
       },
       onPageScroll: tool.throttle(function(msg){
          this.setData({
            win_scrollTop: msg[0].scrollTop
          });
       }),
       gotoUnlock: tool.debounce(function() {
          this.saveUserInfo();
       }),
       saveUserInfo:function(){
          console.log(111)
       }
    })
    

    5、总之 函数节流是减少函数的触发频率,而函数防抖则是延迟函数执行,并且不管触发多少次都只执行最后一次。

    相关文章

      网友评论

          本文标题:微信小程序 用函数实现 防抖 和 节流

          本文链接:https://www.haomeiwen.com/subject/aeoowrtx.html