防止重复点击
var isclick= true;//加一个点击开关
function click(){
if(isclick){
isclick = false;
//下面添加需要执行的事件
...
}
}
防止重复点击（设置定时器）
var isclick= true;
function click(){
if(isclick){
isclick= false;
//下面添加需要执行的事件
...
//定时器
setTimeout(function(){
isclick = true;
}, 500);
}
}
防抖动
/*防抖函数，通过推迟每次事件执行的时间来减少不必要的查询
*handler:要执行的方法
*delay：每次事件执行的推迟时间(毫秒)
*/
function debounce(handler, delay) {
var timer;
return function () {
var self = this, arg = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
handler.apply(self, arg)
}, delay)
}
}
function showAll(e) {
console.log(e.target)
console.log('执行查询操作', new Date().getTime())
}
var searchInput = document.getElementById('search');
searchInput.addEventListener('keyup', debounce(showAll, 500), false)
节流函数
/*节流函数，通过控制每次事件执行的时间间隔控制短时间多次执行方法
*handler:要执行的方法
*wait：每次点击事件执行的时间间隔(毫秒)
*/
function throttle(handler, wait) {
var lastTime = 0;
return function () {
var nowTime = new Date().getTime();
if (nowTime - lastTime > wait) {
handler.apply(this, arguments);
lastTime = nowTime;
}
}
}
// 提交方法
function ajaxForm(e) {
console.log(e.target)
console.log('执行提交操作', new Date().getTime())
}
var subBtn = document.getElementById('submit');
subBtn.addEventListener('click', throttle(ajaxForm, 1000), false)
表单防重复提交
form action="" onsubmit="return dosubmit()" method="post">
<input1>
<input2>
...
<input type="submit" value="提交" id="submit">
</form>
var isCommitted = false;//表单是否已经提交标识，默认为false
function dosubmit(){
if(isCommitted==false){
isCommitted = true;//提交表单后，将表单是否已经提交标识设置为true
return true;//返回true让表单正常提交
}else{
return false;//返回false那么表单将不提交
}
}
