有时候网络抽风的时候，1秒内频繁点击按钮多次，会出现多次的响应的问题，要解决这个问题，可以采取
函数节流 throttle的方式。下面演示以下错误的方式和正确(throttle)的方式。
错误的方式
- enroll_management.js文件的refreshClick函数监听到了
重新录用的点击
// 重新录用
refreshClick: function (e) {
var user_id = e.currentTarget.dataset.id;
console.log(Math.round(Math.random() * 1000) + "----用户id为" + user_id);
this.setOrderStage(user_id, 2);
},
错误方式的效果截图(1秒内多次执行log)
101.1755233.gif
正确的方式
- public.js文件对函数节流(throttle)进行声明和定义
module.exports = {
throttleFunc: function throttleFunc(func, marginTime) {
if (marginTime == undefined || marginTime == null) {
marginTime = 1700
}
let lastTime = null
return function () {
let currentTime = + new Date()
if (currentTime - lastTime > marginTime || !lastTime) {
func.apply(this, arguments)
lastTime = currentTime
}
}
},
}
- enroll_management.js文件使用函数节流(throttle)
// 重新录用
refreshClick: common.throttleFunc(function (e) {
var user_id = e.currentTarget.dataset.id;
console.log(Math.round(Math.random() * 1000) + "----用户id为" + user_id);
this.setOrderStage(user_id, 2);
},1000),
正确方式的效果截图(1秒内只执行1次执行log)
101.1755234.gif
