小程序自定义导航栏，页面滚动到一定高度时，加上背景色，用到了节流函数和函数防抖

页面效果：（自定义导航栏）。页面刚开始没有导航栏，滚动的距离大于图片的高度时，导航栏出现，反之，导航栏隐藏。

wxml文件中代码。

//这里使用小程序中的导航栏扩展组件
<mp-navigation-bar background="{{background}}" title="{{title}}" tag-class="{{indexStyle==0?'bg':''||index==indexStyle?'':''}}">
</mp-navigation-bar>

wxss文件中代码。

.bg{
  height: 0px!important;
  padding-top: 0px!important;
}

js文件中代码。
在使用onPageScroll滚动时，因为操作频繁，导致使用的this.setData使页面滚动会延迟2-3秒，所以使用了函数节流来降低频繁操作。但是函数节流会使页面滑动过快，导致部分内容获取不到，从而拿到的高度有问题，解决方法：使用了函数防抖，这样使每次拿到的滚动的高度都是最后一个数值，而不是根据时间来拿到的这个数值。

Page({
  data: {
    indexStyle: 0,
    background: '',
    title:''
  },
  //监听屏幕滚动 判断上下滚动  
  onPageScroll: util.debounce(function (e) {
    var that=this;
    //console.log(e[0].scrollTop);
    that.jl(e[0].scrollTop);  //拿到每次监听滚动的最后一个数值
  }),
  jl:util.throttle(function (e) {
    var that = this;
    console.log(e);
    if (e[0] >= this.data.checkedNum) {
      that.setData({
        indexStyle: 1,
        background: "#ffffff",
        title: "商品详情"
      })
      //console.log(this.data.checkedNum);
    } else if (e[0] <= this.data.checkedNum) {
      that.setData({
        indexStyle: 0,
        background: "",
        title: ""
      })
    }

  }),
  //这里拿的子组件中图片的高度
  checkNum: function (e) {
    this.setData({
      checkedNum: e.detail.checkedNum,
    })
  },
})

util.js文件里写函数节流和函数防抖。

module.exports = {
	throttle: throttle,
    debounce: debounce
}
/*函数节流*/
function throttle(fn, interval) {
  var enterTime = 0;//触发的时间
  var gapTime = interval || 100;//间隔时间，如果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 || 50;//间隔时间，如果interval不传，则默认1000ms
  return function () {
    clearTimeout(timer);
    var context = this;
    var args = arguments;//保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
    timer = setTimeout(function () {
      fn.call(context, args);
    }, gapTime);
  };
}

函数节流和函数防抖的概念。

    函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，
如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

	函数节流，限制一个函数在一定时间内只能执行一次。