基于防抖和节流的性能优化（web前端和小程序）

防抖和节流概念

防抖：就是指触发事件在n秒内只能执行一次，如果在n秒内又执行了，则会重新计算函数执行时间
节流：就是指连续触发事件，但是在一段时间内只执行一次函数

web前端防抖小案例

var box= document.querySelector('.box');
var testDebounce = debounce(move,1000);
box.onmousemove =  testDebounce;

function move(){
		this.innerHTML = ev.clientX;
}
	
function debounce(fn,wait){
	let timer = null;
	return function(){
		var args = arguments;
		var now = !timer;
		timer && clearTimeout(timer);
		timer = setTimeout(()=>{
			timer = null;
		},wait)
		if(now){
			fn.apply(this,args);
		}
	}
}

节流函数逻辑
1、通过返回一个function对象绑定于事件（点击）
2、主要功能实现通过setTimeout函数
3、通过call，apply，bind改变function传过来的参数指向去返回的function参数
4、箭头函数令this指向调用debounce对象变成return function作用域内
5、now 变量主要是作为先调用一次，在一段wait时间内，调用不会生效，直至一段wait时间过后，now重新变为true，才可以再次调用。
6、把函数调用置于setTimeout外，可以立即停止setTimeout，在需要节流的函数内进行return可以立即跳出debounce。

小程序基于点击事件提交表单的防抖函数

学完防抖函数，改变一下小程序项目中表单提交，防止被用户短时间多次点击。

utils.js

function debounce(fn,wait){
  let timer = null
  return function(e){
    var args = arguments
    var that = this
    var now = !timer;
    timer && clearTimeout(timer)
    timer = setTimeout(()=>{
      timer = null;
    },wait)
    if(now){
      fn.apply(this,args);
    }
  }
}

module.exports = {
  debounce:debounce
} 

index.js

const util = require('../../utils/utils.js')
saveData:util.debounce(function(){
	//saveData为点击按钮提交表单事件
	//进行逻辑判断，return可以跳出debounce事件
	  if (that.data.title == "" || that.data.title == 'None') {
      wx.showToast({
        title: '请输入事件标题',
        icon: 'none',
        duration: 2000
      })
      return;
    }else if(openid == "" || openid== 'None'){
      wx.showToast({
        title: '请授权登录',
        icon: 'none',
        duration: 2000
      })
      return;
    }else if(time == "" || time== 'None'){
      wx.showToast({
        title: '请输入具体时间',
        icon: 'none',
        duration: 2000
      })
      return;
    }
    //最后提交云数据库
},2000}

index.wxml

	bindtap="saveData"

节流函数

定时器没有被清除，存在一定问题

	function reduce(fn,wait){
		var timmer = null;
		return function(){
			var now = timmer;
				if(!now){
					timmer = setTimeout(()=>{
						now = null;
						fn.apply(this)
					},wait)
				}
		}
	}

从上次执行时间跟现在执行时间相比是否大于等待时间

function reduce(fn,wait){
	let last = 0;
	return function(){
			var args = argsument;
			var now = Date.now();
			if(now-last>wait){
				fn.apply(this,ags)
				last = now;
			}
	}
}

以上是看完视频后自己总结，有错请各位大佬指出