javascript 节流和防抖动

一、节流
1、节流就是阻止一个函数在指定时间段内频繁的执行，是其在指定时间段内只能执行一次
2、场景：当用户和界面频繁交互时对页面很不友好，我们可以通过一个方法使得某个函数在指定时间段内只能执行一次，这个方法有个通用的叫法：“节流”
3、实现原理，定义一个标志来标识该函数是否可以执行
4、上代码：

	<!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 id="btn">点赞</button>
    <script type="text/javascript">
        
        let btn = document.getElementById('btn');
		
		//将其封装起来以便复用
        function _throttle(fn,interval){
            let last = null;
            let timer;
            var interval = interval || 500;
            return function () {
                let th = this;
                let args = arguments;
                let now = new Date();

                if ( last && now - last < interval) {
                    alert('操作过于频繁请稍后');
                    clearTimeout(timer);
                    timer = setTimeout(() => {
                        last = now;
                    }, interval);
                }else{
                    console.log("===",now - last);
                    last = now;
                    fn.apply(th,args);
                }
            }
        }
        
		//使用栗子
        btn.onclick = _throttle(function (is) {
                console.log("正常执行");
        },3000);

    
    </script>
</body>
</html>

二、防抖动
1、防抖动就是在标签事件频繁触发时阻止一些不需要频繁执行的代码或功能
2、场景：我们想象一个场景当一个数据需要频繁触发事件改动时，如果每次触发都请求一次服务器这样服务器的压力就会很大，我们用一个方法来实现，事件触发后过个指定时间段再去请求服务器这样是不是很好，这方法作用就是 js中的 “防抖动”
3、实现原理，使用定时器在事件触发时延时触发指定代码
4、上代码：：

	<!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 id="btn">点赞</button>
    

    <script type="text/javascript">
    
    let btn = document.getElementById('btn');

		//将其封装起来以便复用
        function _debounce(fn,delay){
            var delay = delay || 200;
            var timer;
            return function(){
                let th = this;
                let args = arguments;
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    timer = null;
                    fn.apply(th,args);
                }, delay);
            };
        }
        
        let i = 0;
        let show = _debounce(()=>{
            console.log("i:"+i);
        },2000);

        btn.onclick = function(){
            i++;
            show();
        }
    </script>
</body>
</html>

三、区别

他们都是可以防止一个函数被无意义的高频率调用
区别在于:

函数节流：是确保函数特定的时间内至多执行一次。
函数防抖：是函数在特定的时间内不被再调用后执行。

tip：不了解arguments对象的可以移步

posted on 2021-04-21 17:58 千里码！阅读(14) 评论(0) 收藏举报来源

javascript 节流 和 防抖动

三、区别

javascript 节流和防抖动