微信公众号开发

微信小程序节流使用方法

本文主要是介绍微信小程序节流使用方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

函数节流: 英文 throttle 有节流阀的意思。大致意思也是 节约触发的频率

那么,函数节流,真正的含义是:单位时间n秒内,第一次触发函数并执行,以后 n秒内不管触发多少次,都不执行。直到下一个单位时间n秒,第一次触发函数并执行,这个n秒内不管函数多少次都不执行

用处:多用于页面scroll滚动,或者窗口resize,或者防止按钮重复点击等情况

 

其实如果只根据 控制函数触发的频率是不好区分这两个概念的。我认为两个函数都能达到防止重复触发的功能。但是函数防抖是 n秒后延迟执行;而函数节流是立马执行,n秒后再立马执行。

1,页面新建,书写一下代码:

/*函数节流*/
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
  };

页面调用:

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)
   }
})

 

这篇关于微信小程序节流使用方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!