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>
posted @ 2022-03-06 11:15  林见夕  阅读(222)  评论(0)    收藏  举报