场景:前端控制”提交“按钮在短时间内不能点击多次。
方法:采用js防抖。
//防抖
function debounce(fn, wait) {
let task = null;
return function () {
if (task) {
console.log('清除计时器');
clearTimeout(task);
}
task = setTimeout(() => {
console.log('设置了计时器');
fn.apply(this, arguments);
}, wait);
}
}
var btn1 = document.getElementById('btnSubmit');
btn1.addEventListener("click", debounce(btnSubmit, 500));
function btnSubmit(){
//提交按钮的功能代码
}
问题:
页面上本不该显示的元素们都出现了,应该是btn1.addEventListener("click", debounce(btnSubmit, 500));这行报错影响到下面的jq了。想问下这个怎么解决~ 前端小bai吃 卑微求zhu~
-补充
不知道是不是我的js结构有问题呢?我在一个测试文档里只写以上代码也是没问题的。以下是出问题文档里js的结构,麻烦帮我看看有无问题~
<script type="text/javascript">
//一堆function
function xxx(){
}
//防抖
function debounce(fn, wait) {
let task = null;
return function () {
if (task) {
console.log('清除计时器');
clearTimeout(task);
}
task = setTimeout(() => {
console.log('设置了计时器');
fn.apply(this, arguments);
}, wait);
}
}
var btn1 = document.getElementById('btnSubmit');
btn1.addEventListener("click", debounce(btnSubmit, 500));
function btnSubmit(){
//提交代码
}
$().ready(function () {
//一堆jq
})
</script>