防抖与节流

最新推荐文章于 2024-08-30 20:29:15 发布

一个爱学习的小码农

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量73

点赞数 1

文章标签： js javascript html css

本文链接：https://blog.csdn.net/weixin_45808356/article/details/115867037

版权

防抖与节流

防抖

1.防抖：事件触发后n秒后再执行

<style>
    div{
        width: 100%;
        height: 300px;
        background-color: #999;
        text-align: center;
        line-height: 300px;
        color: #fff;
        font-size: 30px;
    }
</style>
<body>
	<div>0</div>
</body>

<script>
 // 获取页面元素
        var div = document.querySelector("div")
        // 定义一个变量
        var num = 1
        // 需要执行的函数
        function changNum(){
            div.innerHTML = num++
        }
        // 鼠标移上一秒后再执行
        function bounce(fn,time){
            var timer
            return function(){
                if(timer) clearTimeout(timer)

                timer = setTimeout(()=>{
                    fn.apply(this)
                },time)
            }
        }
        // div.onmousemove = changNum
        div.onmousemove = bounce(changNum,1000)
   </script>

2.防抖：事件触发立即执行，n秒后才能再次触发执行

//样式和页面代码引用上面例子
 function bounce(fn ,time){
    var timer 
     return function(){
         if(timer) clearTimeout(timer)

         var callNow = !timer

         timer = setTimeout(()=>{
             timer = null
         },time)

         if(callNow) fn.apply(this)
     }
 }
 div.onmousemove = bounce(changNum,1000)

节流

节流：连续发生的事件在n秒内只执行一次函数

1.利用setTimeout实现（消耗性能）

function throttle(fn,time){
  var timer
  return function(){
      if(!timer){
          timer = setTimeout(()=>{
              timer = null
              fn.apply()
          },time)
      }
  }
}
div.onmousemove = throttle(changNum,1000)

2.利用时间戳实行节流

function throttle(fn,time){
	var prev = 0 //记录上一次的时间
	   return function(){
	       var now = new Date()//当前时间
	       if(now-prev > time){
	           fn.apply()
	           prev = now//重置上一次时间
	       }
	   }
}
div.onmousemove = throttle(changNum,1000)

一个爱学习的小码农

关注

1
点赞
踩
0

收藏

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

防抖与节流防抖1.防抖：事件触发后n秒后再执行<style> div{ width: 100%; height: 300px; background-color: #999; text-align: center; line-height: 300px; color: #fff; font-size: 30px; }</style><body
复制链接

扫一扫