美文网首页
JavaScript - 函数节流throttle

JavaScript - 函数节流throttle

作者: ElricTang | 来源:发表于2019-10-07 16:16 被阅读0次

函数节流:

  • 函数被频繁调用,会造成性能问题。函数节流保证固定时间间隔内,无论被重复调用多少次都只执行一次。
  • 应用场景:浏览器resize、无限加载、滚动条

1.定时器实现节流

        function throttle(fn,delay){
            let timer = null;
            return (...args)=>{
                if(timer){
                    return
                }
                timer = setTimeout(()=>{
                    fn(args);
                    timer = null;                 
                },delay||1000)
            }
        }

2.计算时间差实现节流

        function throttle(fn,delay){
            let history = Date.now();
            return (...args)=>{
                let now = Date.now();
                if( now - history >= delay ){
                    fn(args);
                    history = Date.now();
                }
            };
        }

相关文章

网友评论

      本文标题:JavaScript - 函数节流throttle

      本文链接:https://www.haomeiwen.com/subject/jeemyctx.html