防抖和节流（属于js性能优化）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖和节流</title>
</head>

<body>
    
    <input type="button" value="按钮" class="btn">
    <span class="text"></span>
    <script>
        //  防抖：当持续触发事件，一段时间内没有在触发事件，事件处理函数才会执行一次 （另一个现象，一致触发一直不执行，至到触发停止，函数才会执行）
      /*   var btn = document.querySelector('.btn')
        var info = document.querySelector('.text')
        var num = 0
        var timer = null （属于防抖函数）
        btn.addEventListener('click', function () {
         ============================================
        if (timer) {
            clearTimeout(timer)
            timer = setTimeout(function () {
                info.innerHTML = num++
            }, 2000)
        } else {
            timer = setTimeout(function () {
                info.innerHTML = num++
            }, 2000)
        }
        =============================================
        代码的简化写法
            if(timer!==null){//不为空时执行，清除之前的额定时器，执行 新的定时器
                clearTimeout(timer)
            }
            timer = setTimeout(function () {//不管上述情况如何，都会执行这部分代码
                    info.innerHTML = num++
                }, 2000)
        }) */



        /* 节流：当事件持续触发时，保证一段时间内只触发一次函数 */
        var btn = document.querySelector('.btn')
        var info = document.querySelector('.text')
        var num = 0
        var isTimer = true
        btn.addEventListener('click', function () {
            if (!isTimer) {//不为真就返回
                return false
            }//隐含的意思是为真就继续执行
            isTimer = false//让isTimer为假
            timer = setTimeout(function () {
                info.innerHTML = num++
                isTimer = true
            }, 2000)
        })


    </script>
</body>

</html>
防抖和节流（属于js性能优化）

猜你喜欢
