1.什么是函数节流?
限制一个函数在一定时间内只能执行一次。
2.项目开发–防止恶意刷注册
最近在开发项目是,写到了home页登录注册,完成了一个form表单,自认为没什么问题了,小伙伴告诉我为了防止有人恶意刷注册,后台接口增加了每次提交间隔60s才能提交一次。
而我前端就用了定时器一大堆代码,加上dom操作修改input的disabled属性完成了这个操作。
后来想到了函数节流。
3.函数节流代码
<button id="obtn">按钮</button>
<script>
//定时器版
function throttle(func, wait) {
let timer = null;
return function (...args) {
if (!timer) {
timer = setTimeout(() => {
timer = null;
func.apply(this, args)
}, wait)
}
}
}
function test(){
console.log('222');
}
let obtn = document.getElementById('obtn');
obtn.onclick = throttle(test,2000);
以上定义了一个按钮,绑定事件test函数,通过节流函数实现了每隔2秒钟才能调用一次test函数。同样后台使用函数节流每个60s才能调用一次dataPush() 函数。