ICode9

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

防抖和节流

2021-07-26 10:05:48  阅读:168  来源: 互联网

标签:function 防抖 定时器 节流 delay 延时 fn


文章目录

防抖

事件发生后,n秒只触发一次,若在n秒内再次触发,则重新计算。

第一类:先延时再执行 【延时可以重新计算】

只要在每次执行事件前,先清除定时器,再开启一个定时器即可

第二类:先执行后延时 【延时可以重新计算】

需要借助一个变量来存储当前的定时器的状态,通过不同的状态,来执行不同的事件

  function handle(fn, delay) {
            var timer = null
            return function() {     //必须形成闭包
                clearTimeout(timer)   //先清空上一次的
                timer = setTimeout(function() {  //必须用函数包裹
                    fn()   
                }, delay)
           }
        }
        document.querySelector("button").onclick = handle(function() {
            console.log("带你寄了")
        }, 2000)

节流

事件发生后,n秒只能触发一次。

先设一个定时器句柄(let time)
只写定时器没有的情况,在里面添加一个定时器,并调用相关事件

当无法使用定时器时,使用时间戳(时间间隔),同样可以实现类似效果

function setInt(fn, delay) { //fn就是要被截留的函数
    var oldtime = 0

    return function callBack() {  //使用闭包,才能保存上次的时间

        var newtime = Date.now()
        if (newtime - oldtime > delay) {
            fn()
            oldtime = newtime
        }
    }
}
document.onscroll = setInt(function() {  //滚动时触发
    console.log("hello")
}, 200)

标签:function,防抖,定时器,节流,delay,延时,fn
来源: https://blog.csdn.net/qq_42451776/article/details/119103329

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

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

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

ICode9版权所有