lovecoding
/
web250825


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            font-size: 30px;
            font-weight: 800;
            text-align: center;
            line-height: 200px;
            color: #f00;
            background: #ff0;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <!-- 
        防抖：
            当事件触发后，等待一段时间在执行回调函数，
            如果在这段时间内，再次触发事件，则重新计时
            触发事件在n秒内只执行最后一次触发的函数
            当事件停止触发一段时间后，才执行一次函数。如果在这段时间内事件再次触发，则重新计时。
            执行回调函数 / 延迟时间 
            输入框输入内容
            滚动事件
            按钮点击：防止用户多次快速点击
    -->
    <script>
        var box = document.getElementById("box");
        console.log(box, box.innerHTML)
        // count +1
        let i = 1
        function Count() {
            box.innerText = i++;
        }
        // Count()
        // Count()
        // Count()
        // Count()
        // 防抖函数
        function debounce(fn, delay) {
            var timer = null;
            return function () {
                if(timer) clearTimeout(timer);
                timer = setTimeout(function () {
                    fn()
                }, delay)
            }
        }
        box.addEventListener('click', debounce(Count, 3000))
    </script>
</body>

</html>