节流与防抖

最新推荐文章于 2024-08-08 16:01:56 发布

街头嗳昧℡

最新推荐文章于 2024-08-08 16:01:56 发布

阅读量85

点赞数

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

本文链接：https://blog.csdn.net/m0_58845957/article/details/120650362

版权

JavaScript 性能优化节流防抖事件监听

关键词由CSDN通过智能技术生成

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

节流

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

<!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>

防抖

简单理解防抖的内容：对当前操作重复执行会造成不必要的性能浪费，通过防抖可以让自定义时长内的重复操作的前n次都不执行，只执行最后一次，我们以一个简单mouseover事件举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#test{
				width: 200px;
				height: 200px;
				margin: 0 auto;
				background-color: antiquewhite;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
		<script type="text/javascript">
		 const test =document.querySelector('#test')
		 function pass(e){
		 	this.innerHTML=(e.screenX+','+e.screenY)
		 }
		test.addEventListener('mousemove',pass)
		</script>
	</body>
</html>

鼠标在div内移动时会实时生成坐标展示在dom元素里，然而这并没有什么必要，肉眼也很难捕捉到快速变化的坐标值，

此时更为合理的展示方式应该是：鼠标停止移动时，dom元素显示当前鼠标坐标，则我们需要做防抖操作，自定义时长内的重复的操作只执行最后一次，

 function debounce(fn,delay){//fn为要防抖的函数操作，delay为防抖延时
			 let timeOut= null//闭包
			 return function(){
             // if(timeOut){ 用来判定是否有正在执行的计时器，有就清除
				clearTimeout(timeOut)//清除计时器
             // }
				timeOut =setTimeout(()=>{//设置新的计时器
					fn.apply(this,arguments)//apply传递参数
				},delay)
			 }
			 }

此处我任务判定是否有计时器在执行没有太大必要性，直接清除未尝不可，可能是视使用情景而定

此时修改函数操作，我们定义一个自定义时限为1s

 test.addEventListener('mousemove',debounce(pass,1000))

通过运行可以发现：只要我们在执行mousemove操作后1s内再次执行，就不会触发pass操作，直到我们某一次执行mousemove后1s内不再执行同样的操作，pass才会被执行，此时dom元素内展示出坐标值

街头嗳昧℡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录