vue 小程序 一秒只能点击多少次(点击节流封装)

254 阅读1分钟
//微信小程序使用// 点击节流函数封装直接使用
export function jieliu(func, context, jiange, ...args){
  const newHM = Date.now()
	if(func.time&&Math.abs(newHM - func.time)<=(jiange||200)){
		return
	}
	func.time = newHM
  func.call(context, ...args)
}
//点击事件
<text @click="controlNumWrap()">搜索</text>
//在需要使用的页面引入公共方法
import { jieliu } from '@/common/utils.js';
//点击节流函数
controlNumWrap(...args){
	jieliu(this.place_order, this, 1100)
        //this.place_order为需要处理的函数名       
        //1100为时间 这里是以1100毫秒内只能点击1次 不传默认为200毫秒
},
//需要处理的函数
async place_order(){
    。。。。
}

//vue使用
//第一步
<p class="img-item" @click="controlNumWrap()">导航</p>

//第二步
import {jieliu} from '../common/ulist' //注意路径//ulist.js里面ulist.js里面ulist.js里面

// 点击节流
export function jieliu(func, context, jiange, ...args){
    const newHM = Date.now() 
    if(func.time&&Math.abs(newHM - func.time)<=(jiange||200)){
          return      
    }      
    func.time = newHM    func.call(context, ...args) 
 }
//第三步
 methods: { 
   btnClickEvent() { 
     alert(this.msg); 
     this.$emit("btnClickEvent");    
    },  
   controlNumWrap(...args) { 
      jieliu(this.place_order, this, 1000); 
      //this.place_order为需要处理的函数名 
      //1100为时间 这里是以1100毫秒内只能点击1次 不传默认为200毫秒   
    },    
   //需要处理的函数 
   place_order() { 
     console.log(111);   
   },      
},