javascript 对于防抖节流理解

最新推荐文章于 2024-09-08 21:17:37 发布

90_小露

最新推荐文章于 2024-09-08 21:17:37 发布

阅读量147

点赞数

分类专栏： javascript基础文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43468902/article/details/103716614

版权

javascript基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先介绍下我的个人理解吧。
防抖：同一个事件短时间多次出发只会触发一次。
节流：每隔一段时间触发一次
最常用的大概就是搜索窗口滚动
下面鼠标移动事件为例

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div{
            height: 300px;
            background: #000;
            line-height: 300px;
            text-align: center;
            color: #ffffff;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

<script>
    //防抖节流
    let myDiv = document.getElementsByTagName('div')[0]
    let count = 0;
    function add(){
        this.innerText = count++ //这里用this而不用myDiv 后面有解释 当然也可以用myDiv
    }
     myDiv.onmousemove = debounce(add)
     function debounce(func){
        
         var timeOut;
         return function(){
             let that = this
             clearTimeout(timeOut)
             timeOut = setTimeout(()=>{
                 //setTimeout 是window.setTimeout,this的指向是window
                 func.apply(that)
             },1000)
         }
     }

到此防抖的基本用法已经有了但是有些人可能会发现第一次出发也要等一秒钟才执行，你的铲平** 就来给你说这不符合交互啊没办法只能改了

	myDiv.onmousemove = debounce(add,true) //加一个Boolean解决第一次是否要执行
     function debounce(func,flag){
         var timeOut;
         return function(){
             let that = this
             clearTimeout(timeOut)
             if(flag){//真 执行
                 if(!timeOut){
                     func.apply(that)
                     timeOut = 1//这边随便赋一个值 要不然下次 !timeOut == true 还是
                 }else{
                     timeOut = setTimeout(()=>{
                         func.apply(that)
                     },1000)
                 }
             }else{
                 timeOut = setTimeout(()=>{
                     func.apply(that)
                 },1000)
             }
         }
     }

以上基本就是防抖的全部内容了
关于节流其实基本是按远离和这个差不多，印象最深的还是一位老师提过的（尿不尽）
 大概意思就是按照一定频率一直**。好吧，你们应该懂得 ，下面来看代码
还是上面的div鼠标一定事件

myDiv.onmousemove = throttle(add,1000) //1秒执行一次
    function throttle(func,waitTime){
        var time = 0;
        return function(){
            let that = this
            var nowTime = Date.now()//或者  +new Date() ; new Date().getTime()都可以  获取当前时间戳
            if(nowTime - time > waitTime){
                func.apply(that)
                time = nowTime
            }
        }
    }

好了完成希望对您有所帮助

90_小露

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 对于防抖节流理解

先介绍下我的个人理解吧。防抖：同一个事件短时间多次出发只会触发一次。节流：每隔一段时间触发一次最常用的大概就是搜索窗口滚动下面鼠标移动事件为例<head> <meta charset="utf-8" /> <title></title> <style> div{ ...
复制链接

扫一扫