小程序函数节流按钮防止重复点击和发布动态时间

本文介绍如何在小程序中创建一个utils.js文件,用于实现函数节流技术,防止按钮重复点击和动态发布的频繁触发,提升用户体验。
摘要由CSDN通过智能技术生成

建一个 utils 文件夹 创建 utils.js 然后复制代码

//防止多次重复点击  (函数节流)
function throttle(fn, gapTime) {
  if (gapTime == null || gapTime == undefined) {
    gapTime = 1000
  }

  let _lastTime = null
  // 返回新的函数
  return function (e) {
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      // fn.apply(this, arguments)   //将this和参数传给原函数
      fn(this, e)    //上方法不可行的解决办法 改变this和e
      _lastTime = _nowTime
    }
  }
}

/*
 *根据客户端的时间信息得到发表评论的时间格式
 *多少分钟前,多少小时前,然后是昨天,然后再是月日
 * Para :
 * recordTime - {float} 时间戳
 * yearsFlag -{bool} 是否要年份
 */
function getDiffTime(recordTime, yearsFlag) {
	if (recordTime) {
		recordTime = new Date(parseFloat(recordTime) * 1000);
		var minute = 1000 * 60,
			hour = minute * 60,
			day = hour * 24,
			now = new Date(),
			diff = now - recordTime;
		var result = '';
		if (diff < 0) {
			return result;
		}
		var weekR = diff / (7 * day);
		var dayC = diff / day;
		var hourC = diff / hour;
		var minC = diff / minute;
		if (weekR >= 1) {
			var formate = 'MM-dd hh:mm';
			if (yearsFlag) {
				formate = 'yyyy-MM-dd hh:mm';
			}
			return recordTime.format(formate);
		}
		else if (dayC == 1 || (hourC < 24 && recordTime.getDate() != now.getDate())) {
			result = '昨天' + recordTime.format('hh:mm');
			return result;
		}
		else if (dayC > 1) {
			var formate = 'MM-dd hh:mm';
			if (yearsFlag) {
				formate = 'yyyy-MM-dd hh:mm';
			}
			return recordTime.format(formate);
		}
		else if (hourC >= 1) {
			result = parseInt(hourC) + '小时前';
			return result;
		}
		else if (minC >= 1) {
			result = parseInt(minC) + '分钟前';
			return result;
		} else {
			result = '刚刚';
			return result;
		}
	}
	return '';
}

//导出
module.exports = {
	getDiffTime: getDiffTime,
  	throttle: throttle,

}

接下来在需要的页面引入使用

var utils = require('../../utils/util.js');   //引入方法

tap: utils.throttle((that, e) => {
   //   base.reques 是自己封装的reques请求 
    base.request({
      url: '',
      type: "post",
      sCallback: data => {
        
        }
      }
    })
  }, 5000//设置按钮在多长时间内点击只调用一次接口),
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值