js中节流和防抖

2022-02-23 09:02:00 阅读：143 来源： 互联网

js中节流和防抖

1.含义
节流:一个事件可以连续多次触发，一定时间段内，让该事件处理函数只会执行一次的方法就叫节流
防抖:持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次
2.个人理解:
节流很好理解就是节约内存,让事件不能连续无间断的触发.
尽量不影响用户体验又能减少事件触发的次数

防抖：举个例子,玩游戏挂机的判定就是防抖,你一段时间没有操作就会触发挂机事件,你只要动一动就不会触发这个事件。
3.实现方法
//防抖

 var input = document.querySelector("input")//获得标签
    var t = null   //定时器
    input.oninput = function () {   //表单的oninput事件
        if (t != null) {        
            clearTimeout(t)
        }
        t = setTimeout(() => { console.log(this.value) }, 500)
    }

//节流` ，懂其一即可
方法一

var flg = true
    onscroll = function () {
        if (flg) {
            console.log("sdsdsd");
            setTimeout(() => {
                flg = true
            }, 500)
        }
        flg = false
    }

方法二

window.addEventListener("scroll", jlf(
        function () {
            console.log("ssss")
        }, 500))




    function jlf(fn, yc) {     //节流函数
        time = new Date()
        return () => {
            if (time - new Date() + yc < 0) {
                fn()
                time = Date.now()
            }
        }
    }

个人理解，有异议以官方为标准

标签：function,触发,防抖,节流,js,事件,flg
来源： https://blog.csdn.net/tjq11111/article/details/123081845

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

ICode9

js中节流和防抖

js中节流和防抖