小程序的节流和防抖的编辑和运用

最新推荐文章于 2023-08-15 21:26:59 发布

隐密修罗

最新推荐文章于 2023-08-15 21:26:59 发布

阅读量213

点赞数

文章标签： html5 小程序前端 vue.js

本文链接：https://blog.csdn.net/qq_18390335/article/details/121490384

版权

小程序节流防抖函数优化性能提升

关键词由CSDN通过智能技术生成

一、小程序的节流和防抖的编辑和运用

共两步
一、创建新文件
二、引入文件使用
我的文件：如图在这里插入图片描述

1、全局的一个的文件内进行export处：
//until.js文件的东西

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

2、在另外一个要用的页面进行引入处理

 页面文件
      <view class="p-15  c-white txt-c classText" 
					bindtap="save"
				  style="background:#269c1b">保存</view>

 js文件
  const {debounce,throttle} = require('../../until/until.js');
  Page({
	data(){
		return:{
		}
	},
	onLoad(){
	},
	method:{
	 //这样写是重点，不是的话会出现this的指向问题
	  save:debounce(function(){
	    let that = this
	    if(that.data.name==''){
	     console.log('请输入姓名')
	      return
	    }
	  },1000),}
})