函数节流和防抖

发布时间:2020-06-21 06:06:49 作者:喝醉的熊
来源:网络 阅读:233

函数节流:一个函数执行一次后 只有大于设定的执行周期后才会执行第二次

需要频繁触发的函数,处于性能角度考虑,在规定时间内,只让函数触发的第一次生效,后面不生效

//节流函数
//fn 要被节流的函数
//delay 规定的时间

function throttle(fn,delay){

         //记录上一次函数触发的时间
         var lastTime = 0;

        return function(){
                 //记录当前函数触发的时间
                 var nowTime = Date.now()

                 if(nowTime - lastTime > delay){

                         //修正this指向问题
                         fn().call(this)

                         lastTime =  nowTime
                 }

        }

}

document.onscoll = throttle(function(){console.log('scroll事件被触发了!!' + Date.now())})

防抖函数

一个需要频繁触发的函数,在规定时间内只让最后一次生效,前面的不生效

function debounce(fn,delay){
     //记录上一次的延时器
     var timer = null;

         return fucntion(){
                        //清除上一次延时器
                     //重新设置新的延时器
                     clearTimeout()
                     timer =  setTimeout(function(){
                             fn.apply(this)
                        },delay)

         }

}

document.getElementByUId("btn").click = debounce(function(){ console.log("点击事件被触发了"+ Date.now())},1000)
推荐阅读:
  1. javascript函数节流和防抖的应用场景有哪些
  2. JS怎么防抖和节流

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

防抖节流 函数节流

上一篇:比原链(Bytom)节点接入文档

下一篇:大数据之三:HBASE安装

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》