提高性能之防抖节流

最新推荐文章于 2024-09-09 09:35:48 发布

抬头第一眼，是天

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量138

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Mr_Ypp/article/details/127028471

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

防抖

 /* 
        防抖
            短时间当中,触发大量事件,会浏览器造成很大压力
            短时当中,我们触发最后一次事件；
            
            防抖 > 短时间当中只触发最后一次
            比如: 坐公交车的时候,当车的人满了之后,公交车才出发；
            比如：王者荣耀英雄回城，规定时间5s回城，被人打断之后就会重新等待5s
    */

<!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>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入账号">
    <script>
        //业务代码
        function fn(e){
            console.log("111111111");
            console.log(e);
            console.log("111111111");
        }
        const inp = document.querySelector("input")
        inp.oninput = debounce(fn,2000)
        //封装防抖 A B C 
        function debounce(fn,time){
            let timer = null;
            return function(){
                if(timer){
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    fn();
                }, time);
            }
        }
    </script>
</body>
</html>

节流

/* 
        节流:
            将业务代码和节流代码分开
            封装一个节流
            短时间当中,触发少次事件
        节流 > 短时间当中触发少次
            比如: 坐公交车的时候,一个站点停一段时间,再触发；
            比如：王者荣耀英雄技能的CD
    */

<!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>Document</title>
</head>
<body>
    <script>
        //业务代码
        function fn(e){
            console.group("开始");
            console.log(e);
            console.groupEnd();
        }
        document.onmousemove = throttle(fn,500);
        //封装一个节流
        function throttle(fn,time){
            let firstTime = 0;
            return function(){
                let nowTime = +new Date();
                if(nowTime - firstTime < time){
                    return;
                }
                firstTime = nowTime;
                //执行业务代码
                fn.call(this,arguments[0]);
            }
        }
    </script>
</body>
</html>