防抖和节流

防抖和节流

防抖就是多次只执行最后一次,节流就是多次只执行几次

防抖

防抖:当连续点击某个按钮去触发某个函数时只会执行最后一次触发函数

<!DOCTYPE html>
<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>函数防抖</title>
</head>

<body>
    <button>防抖</button>
    <script>
        //第一步:定义一个存储定时器的变量
        let timer;
        //第二步定义防抖函数
        function debounce() {
            //判断有没有定时器,第一次点击按钮时是没有定时器的,所以会执行后面的定时器,但是在两秒内又点击了按钮此时就会清空定时器,然后又重开定时器
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                console.log('防抖');
            }, 2000)
        }
        let btn = document.querySelector('button');
        btn.onclick = function() {
            debounce();
        }
    </script>
</body>

</html>

节流

节流:当连续点击按钮触发某个函数时如果在设定时间内是不会触发这个函数的

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>函数节流</title>
    <style></style>
</head>

<body>
    <button>节流</button>
    <script>
        let btn = document.querySelector('button');
        //定义节流函数
        function throttle(time) {
            //使用flag变量存储第一次点击时的毫秒数
            let flag = 0;
            return function() {
                //获取此时点击时的毫秒数
                let date = +new Date();
                //判断此时点击时的毫秒数减去第一次点击时的毫秒数，如果大于设定的time,则执行条件里的操作,如果小于设定的time,那么在这个时间段连续点击按钮是无法执行条件里的操作
                if (date - flag > time) {
                    console.log('节流');
                    flag = date;

                }
            }
        }
        btn.onclick = throttle(2000);
    </script>
</body>

</html>
posted @ 2021-09-12 22:56  QTDD  阅读(188)  评论(0)    收藏  举报