节流与防抖

最新推荐文章于 2024-06-07 16:06:22 发布

青阳zi

最新推荐文章于 2024-06-07 16:06:22 发布

阅读量337

点赞数 2

分类专栏： JS 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/qq_34093387/article/details/120457641

版权

JS 专栏收录该内容

39 篇文章 8 订阅

订阅专栏

节流

这是一个没有做节流的改变屏幕尺寸可以变色的效果，会进行反复加载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            function coloring(){
                let r  = Math.floor(Math.random()*255)
                let g  = Math.floor(Math.random()*255)
                let b  = Math.floor(Math.random()*255)
                document.body.style.background = `rgb(${r},${g},${b})`
            }
            window.addEventListener('resize',coloring)
            
        </script>
    </body>
</html>

下面演示添加节流方法1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            function coloring(){
                let r  = Math.floor(Math.random()*255)
                let g  = Math.floor(Math.random()*255)
                let b  = Math.floor(Math.random()*255)
                document.body.style.background = `rgb(${r},${g},${b})`
            }
            function throttle(func,delay){
                let timer;
                return function(){
                    let context = this;
                    let args = arguments;
                    if(timer){
                        return;
                    }
                    timer = setTimeout(function(){
                        func.apply(context,args)
                        timer = null
                    },delay)
                }
            }
            window.addEventListener('resize',throttle(coloring,1000))
            
        </script>
    </body>
</html>

下面演示添加节流方法2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            function coloring(){
                let r  = Math.floor(Math.random()*255)
                let g  = Math.floor(Math.random()*255)
                let b  = Math.floor(Math.random()*255)
                document.body.style.background = `rgb(${r},${g},${b})`
            }
            function throttle(func,delay){
                let pre = 0;
                return function(){
                    let now = new Date();
                    let context = this;
                    let args = arguments;
                    if(now - pre > delay){
                        func.apply(context,args)
                        pre = now
                    }
                }
            }
            window.addEventListener('resize',throttle(coloring,1000))
            
        </script>
    </body>
</html>

防抖

青阳zi

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
节流与防抖

节流这是一个没有做节流的改变屏幕尺寸可以变色的效果，会进行反复加载<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> function coloring(){...
复制链接

扫一扫