ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

记录一下学习防抖和节流的操作

2022-06-10 11:35:56  阅读:159  来源: 互联网

标签:防抖 false 节流 记录 timer flag setTimeout


所谓节流和防抖,其原理就是定时器,我把我的简单理解记录一下

防抖(debounce):刚开始执行一次,然后在特定时间里该方法只执行一次

场景:用户多次点击按钮

节流(throttle):刚开始不执行,只在特定时间里执行一次

场景:在输入框输入值的时候,可以减少赋值操作

防抖(这边测试是利用原生的写的,当然也可以进行封装操作,刚开始这样好理解一些)

     let flag=false
        debounce.onclick=()=>{
            if(!flag){
                flag=true
                 //做的一些事情
                setTimeout(()=>{
                    flag=false
                },1000)
            }
        }

节流

    var timer=null
    input.oninput=()=>{
         clearTimeout(timer);
         timer = setTimeout(() => {
           //做的事情
         }, 1000)
     }

 

标签:防抖,false,节流,记录,timer,flag,setTimeout
来源: https://www.cnblogs.com/wcq520/p/16362584.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有