3-6 如何防止多次点击-重复请求

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <button id="btn2">按钮2</button>
 
    <script>
        // 防抖
        const btn = document.querySelector('#btn');
        const fn = defa(ad);
 
        btn.addEventListener('click', fn)
 
        function defa(fn, time = 1000) {
            let timeId = null;
            return function() {
                const self = this;
                const args = arguments;
                if(timeId){
                    clearTimeout(timeId);
                }
                timeId = setTimeout(() => {
                    if(fn instanceof Function){
                        fn.apply(self, ...args)
                    }    
                }, time)
            }
        }
 
        function ad() {
            console.log('ok')
        }
    </script>
 
    <script>
        // 通过按钮的禁用属性
        const ann = document.querySelector('#btn2');
 
        const func = defc(ass)
 
        ann.addEventListener('click', func)
 
        function defc(fn, time=1000) {
            return function() {
                const self = this;
                const args = arguments;
                const dis = this.disabled;
                if(dis) return;
                self.disabled = true;
                setTimeout(() => {
                    fn.apply(self, ...args);
                    self.disabled = false;
                }, time)
 
            }
        }
 
        function ass() {
            console.log('oks')
        }
 
    </script>
 
    <script>
        // 根据网络情况loading 的来限制用户的点击，这只是接口响应慢的情况下
    </script>
</body>
</html>

本文作者：林见夕

本文链接：https://www.cnblogs.com/ifon/p/15971096.html

posted @ 2022-03-06 11:15 林见夕阅读(206) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 3-9 点击一个按钮，浏览器会做些什么事情

· 3-6 文件分片上传

· 按钮重复点击解决方法

· 防止提交按钮多次点击，造成界面多次提交问题

· 防止按钮多次连续点击

2025年3月

日

一

二

三

四

五

六

林见夕

行有不得，反求诸己

3-6 如何防止多次点击-重复请求

随笔分类

	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<button id="btn">按钮</button>
	<button id="btn2">按钮2</button>

	<script>
	// 防抖
	const btn = document.querySelector('#btn');
	const fn = defa(ad);

	btn.addEventListener('click', fn)

	function defa(fn, time = 1000) {
	let timeId = null;
	return function() {
	const self = this;
	const args = arguments;
	if(timeId){
	clearTimeout(timeId);
	}
	timeId = setTimeout(() => {
	if(fn instanceof Function){
	fn.apply(self, ...args)
	}
	}, time)
	}
	}

	function ad() {
	console.log('ok')
	}
	</script>

	<script>
	// 通过按钮的禁用属性
	const ann = document.querySelector('#btn2');

	const func = defc(ass)

	ann.addEventListener('click', func)

	function defc(fn, time=1000) {
	return function() {
	const self = this;
	const args = arguments;
	const dis = this.disabled;
	if(dis) return;
	self.disabled = true;
	setTimeout(() => {
	fn.apply(self, ...args);
	self.disabled = false;
	}, time)

	}
	}

	function ass() {
	console.log('oks')
	}

	</script>

	<script>
	// 根据网络情况loading 的来限制用户的点击，这只是接口响应慢的情况下
	</script>
	</body>
	</html>