javaScript_防抖与节流

简介: javaScript_防抖与节流

防抖事件

定义:持续触发事件,一定时间内没有触发事件,事件处理函数只会执行一次,
当设定的时间内触发过一次事件后会重新开始延时。
例:输入框的事件(2s显示内容,不是实时刷新显示内容),对比输入框的内容事件。
实时刷新的效果

        <div class="container">
            <div class="left">
                <p>实时刷新显示内容</p>
                <input type="text" id="leftInput" />
                <div class='textDiv' id="textShow"></div>
            </div>

            <div class="right"></div>
        </div>
        <script>
            var inputDom=document.getElementById('leftInput');
            inputDom.addEventListener('keyup',function(e){
    
    
                var textDom=document.getElementById('textShow');
                console.log(e.target.value);
                textDom.innerText=e.target.value;
            })    
        </script>

输入123456会依次打印123456的金字塔
image.png

防抖(1s内显示输入内容)

        <div class="container">
            <div class="left">
                <p>防抖(1s内显示输入内容)</p>
                <input type="text" id="leftInput" />
                <div class='textDiv' id="textShow"></div>
            </div>

            <div class="right"></div>
        </div>
        <script>
            // 防抖
            var inputDom = document.getElementById('leftInput');
            // 函数柯里化
            function debounce(delay, callback) {
    
    
                let timer
                return function(value) {
    
    
                    //闭包内存泄漏
                    clearTimeout(timer)
                    timer = setTimeout(function() {
    
    
                        //执行
                        callback(value)
                    }, delay)
                }
            }
            // 显示内容的函数
            function showText(value) {
    
    
                var textDom = document.getElementById('textShow');
                console.log(value)
                textDom.innerText = value;
            }
            var debounceFunc = debounce(1000, showText);
            inputDom.addEventListener('keyup', function(e) {
    
    
                let value = e.target.value
                debounceFunc(value)
            })
        </script>

1s内输入123456只会打印一次123456
image.png

节流事件

定义:一段时间直只调用一次事件处理函数
实际用例:提交事件 、游戏的技能cd(在游戏cd中点击n次都不会发动技能)

// 节流
            var skillDom = document.getElementById('skillTriger');
            function throttle(wait,callback) {
                let timeOut;
                return function(value) {
                    if (!timeOut) {
                        timeOut = setTimeout(function() {
                            callback(value);
                            //执行一次,时间段内的都不知执行
                            timeOut = null;
                        }, wait)
                    }
                }
            }
            function skillEvent(value){
                var textDom = document.getElementById('skillEventId');
                console.log(value)
                ++count
                textDom.innerText = value+count;
            }
            var skillAc=throttle(3000,skillEvent)
            var count=0
            skillDom.addEventListener('click', function(e) {
                let value = e.target.value
                skillAc(value)
            })

在这里插入图片描述

完整的html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>防抖与节流</title>
    </head>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }

        .container {
    
    
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: 400px;
            background: #262626;
            display: flex;
        }

        .left {
    
    
            position: relative;
            width: 50%;
            height: 100%;
            background: #00cec9;
            box-sizing: border-box;
            overflow: hidden;

        }

        .right {
    
    
            position: relative;
            width: 50%;
            height: 100%;
            background: #b2bec3;
        }
    </style>
    <body>
        <div class="container">
            <div class="left">
                <p>防抖(1s内显示输入内容)</p>
                <input type="text" id="leftInput" />
                <div class='textDiv' id="textShow"></div>
            </div>

            <div class="right">
                <p>节流(3s内触发一次)</p>
                <input type="submit" id="skillTriger" value="发动技能" />
                <div class='skillEvent' id="skillEventId"></div>
            </div>
        </div>
        <script>
            // 防抖
            var inputDom = document.getElementById('leftInput');
            // 函数柯里化
            function debounce(delay, callback) {
    
    
                let timer
                return function(value) {
    
    
                    //闭包内存泄漏
                    clearTimeout(timer)
                    timer = setTimeout(function() {
    
    
                        //执行
                        callback(value)
                    }, delay)
                }
            }
            // 显示内容的函数
            function showText(value) {
    
    
                var textDom = document.getElementById('textShow');
                console.log(value)
                textDom.innerText = value;
            }
            var debounceFunc = debounce(1000, showText);
            inputDom.addEventListener('keyup', function(e) {
    
    
                let value = e.target.value
                debounceFunc(value)
            })

            // 节流
            var skillDom = document.getElementById('skillTriger');

            function throttle(wait, callback) {
    
    
                let timeOut;
                return function(value) {
    
    
                    if (!timeOut) {
    
    
                        timeOut = setTimeout(function() {
    
    
                            callback(value);
                            //执行一次,时间段内的都不知执行
                            timeOut = null;
                        }, wait)
                    }
                }
            }

            function skillEvent(value) {
    
    
                var textDom = document.getElementById('skillEventId');
                console.log(value)
                    ++count
                textDom.innerText = value + count;
            }
            var skillAc = throttle(3000, skillEvent)
            var count = 0
            skillDom.addEventListener('click', function(e) {
    
    
                let value = e.target.value
                skillAc(value)
            })
        </script>
    </body>
</html>
目录
相关文章
|
1月前
|
JavaScript
JS中防抖和节流的区别是什么
JS中防抖和节流的区别是什么
16 0
|
1月前
|
JavaScript 前端开发 UED
【面试题】面试官:说说你对js中的 防抖 和 节流 的理解
【面试题】面试官:说说你对js中的 防抖 和 节流 的理解
|
1天前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
11 0
|
28天前
|
JavaScript 前端开发
js的节流和防抖
js的节流和防抖
12 0
|
28天前
|
JavaScript 前端开发 UED
|
1月前
|
JavaScript 前端开发 UED
JavaScript:节流&防抖
JavaScript:节流&防抖
24 1
|
1月前
|
JavaScript 前端开发 搜索推荐
面试官:请说说JS中的防抖和节流
面试官:请说说JS中的防抖和节流
|
1月前
|
前端开发 JavaScript 程序员
【面试题】 js-面试官要求手写节流防抖?
【面试题】 js-面试官要求手写节流防抖?
|
3月前
|
JavaScript 前端开发 Java
手写JavaScript防抖节流和休眠函数
防抖原理是在一定时间内,只有最后一次操作,再过延迟的时间后执行,一般用于防止用户多次重复点击按钮,只会触发最后一次
24 0
|
3月前
|
JavaScript
js的节流与防抖
js的节流与防抖
25 0

相关产品

  • 云迁移中心