前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序 函数防抖和函数节流

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

作者头像
peng_tianyu
发布2022-12-15 17:06:06
1.2K0
发布2022-12-15 17:06:06
举报
文章被收录于专栏:前端开发随记前端开发随记

函数防抖:延迟函数执行,多用于input框输入时,显示匹配的输入内容的情况

函数节流:单位时间n秒内,第一次触发函数执行 之后不管触发多少次都不执行。到下一个单位时间n秒时 第一次触发函数执行,多用于页面scroll滚动、窗口resize、防止按钮重复点击

函数节流是减少函数的触发频率;函数防抖是延迟函数执行,且不管触发多少次都只执行最后一次

小程序中使用函数防抖、节流一般都将这两种方法封装在公用的js中

代码语言:javascript
复制
//common.js

/*函数节流*/
function throttle(fn, interval) {
  var enterTime = 0; //触发的时间
  var gapTime = interval || 300; //间隔时间,如果interval不传值,默认为300ms
  return function() {
	var that = this;
	var backTime = new Date(); //第一次函数return即触发的时间
	if(backTime - enterTime > gapTime) {
	  fn.call(that, arguments);
	  enterTime = backTime; //赋值给第一次触发的时间 保存第二次触发时间
    }
  };
}

/*函数防抖*/
function debounce(fn, interval) {
  var timer;
  var gapTime = interval || 1000; //间隔时间 不传值默认为1000ms
  return function() {
    clearTimeout(timer);
    var that = this;
    var args = arguments; //保存arguments setTimeout是全局的 arguments不是防抖函数需要的
    timer = setTimeout(function() {
	  fn.call(that, args);
    }, gapTime);
  };
}

/*导出*/
export default {
  throttle,
  debounce
};

使用

代码语言:javascript
复制
import tool from '路径';
Page({
  data: {
    a: 0
  },
  onPageScroll: tool.throttle(function(msg){
    this.setData({
      a: msg[0].scrollTop
    });
  }),
  goUnlock: tool.debounce(function() {
    this.saveUserInfo();
  }),
  saveUserInfo: function() {
    console.log(1);
  }
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-08-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 函数防抖:延迟函数执行,多用于input框输入时,显示匹配的输入内容的情况
  • 函数节流:单位时间n秒内,第一次触发函数执行 之后不管触发多少次都不执行。到下一个单位时间n秒时 第一次触发函数执行,多用于页面scroll滚动、窗口resize、防止按钮重复点击
    • 小程序中使用函数防抖、节流一般都将这两种方法封装在公用的js中
      • 使用
      相关产品与服务
      云开发 CloudBase
      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档