JavaScript-防抖&节流

本文主要是介绍JavaScript-防抖&节流，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

防抖和节流是防止高频率触发的事件

防抖，一般用在使用

onresize事件（onresize：当浏览器被重置大小时执行Javascript代码）、

oninput事件：在用户输入时触发。

如果事件进行高频率触发，很可能会导致服务器崩溃

那么就可以使用函数防抖进行优化，比如你乘坐电梯，电梯的机制是当人进入电梯后，十秒钟内自动关门，这十秒钟内人可以进出，当到了十秒钟后，不管你有没有人进入出去都直接关门，准时运作。

那么节流就不一样了，同样是电梯十秒运作，如果十秒钟之内有人进入或者出去，那么十秒钟就会重新开始计时，直到十秒之内都不在有人流动才会关门

函数节流简单理解

每隔一段时间执行一次

函数防抖简单理解

每当事件触发一次，就会重置定时器，一直到最后一次触发事件，再去执行

防抖一般用于触发input事件

例如：

<body>
    请输入信息：<input type="text">
    <script>
        var input =document.querySelector('input');
        input.oninput = function(){
            console.log('事件被触发');
        }
    </script>
</body>

效果如下：

我们在输入文字时，每次输入都会发送请求，这样中间的很多东西没有必要给后端，给了的话对服务器的压力非常大，那么在这里可以使用函数防抖来进行优化

进行优化过后：

<!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>
    请输入信息：<input type="text">
    <script>
    var processor = {  
    timeoutId: null,
    performProcessing: function() {
    var days = new Date()
    var a= days.getHours();
    var b= days.getMonth();
    var c= days.getSeconds();
    var d= days.getMilliseconds();
    console.log(a+'时'+b+'分'+c+'秒'+d+'毫秒');
    },
  	process: function() {
  	  var that = this;
      clearTimeout(that.timeoutId);    
      that .timeoutId = setTimeout(function() {
        that.performProcessing();
      }, 500)                     //每隔500毫秒后执行，如果中间间隔没到五秒钟还在输入，那么这500毫秒将重新开始计算
  	}
  };
  document.querySelector('input').oninput = function() {
  	processor.process();
  }
    </script>
</body>
</html>

效果如下图所示：

节流

原理：规定一个时间，在这个时间段内的所有事件都会一起被执行

一般用于：resize，touchmove移动DOM，上拉列表加载数据等

详情

<body>
    <div>
        加入节流-定时器 & 时间戳：<input type="text" id="throttle"/>
    </div>
    <script>
        window.onload = () => {
            function ajax (data) {
                console.log(new Date().toLocaleTimeString() + ' - ' + data)
            }
            function throttle(fn, delay) {
                let last
                return args => {        
                    let now = Date.now()

                    if (last && now < last + delay) {      
                        clearTimeout(fn.id)

                        fn.id = setTimeout(() => {
                            fn.call(this, args)
                            last = now
                        }, delay)
                    } else {
                        fn.call(this, args)
                        last = now
                    }
                }
            }
            const throttleAjax = throttle(ajax, 1000)
            document.querySelector('#throttle').addEventListener('keyup', e => {
                throttleAjax(e.target.value)
            })
        }
    </script>
</body>

这篇关于JavaScript-防抖&节流的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程