[转载]js节流与防抖 防止重复提交 防止频繁重复点击

原文

/web_xyk/article/details/80165824

此文仅用于学习笔记：

一、节流、防止短时间多次提交操作

现有一提交按钮提交点击后提交表单信息。

但是经常会出现： 1.不小心点了多次，就提交了多次

2.网络卡顿的时候网页没反应，用户频繁点击的情况

// 即这种写法：var subBtn = document.getElementById('submit');subBtn.addEventListener('click', ajaxForm, false)// 提交方法function ajaxForm(e) {console.log(e.target)console.log('执行提交操作', new Date().getTime())}

通过添加节流函数来解决

/*节流函数，通过控制每次事件执行的时间间隔控制短时间多次执行方法

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)

二、防抖动

应用场景：模糊查询，根据输入内容提示相关完整内容 (浏览器必备功能)

不好的写法：

function showAll(e) {console.log(e.target)console.log('执行查询操作', new Date().getTime())}var searchInput = document.getElementById('search');searchInput.addEventListener('keyup', showAll, false)

例：查询 ESP(我们并不想查询E或者ES),会执行三次，无论输入多快

通过添加防抖函数来优化查询体验

/*防抖函数，通过推迟每次事件执行的时间来减少不必要的查询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)

查询 ESP，输入较快的情况只会执行一次查询ESP