js性能优化-节流、防抖

节流

节流就是优化高频率执行js代码的一种手段 例如大家熟悉的搜索引擎的联想搜索功能、鼠标不断点击触发，mousedown(单位时间内只触发一次)、window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

保证一定时间内，核心代码只执行一次

function throttle(fn,delay){
   let canRun = true;
   return function(){
        if(!canRun){
            return;
        }
        canRun = false;
        setTimeout(function(){
            fn.apply(this,arguments)
                canRun = true;
            },delay)
        }
  }
  function showTop(){
           console.log('滚动')
  }
  window.onscroll = throttle(showTop,1000)

防抖

防抖 在第一次触发事件时不立即执行函数，而是给出一个期限值 例如200ms

如果200ms内没有再次触发事件，那么就执行函数

如果200ms内再次触发事件，那么当前的计时取消，重新开始计时

效果： 如果同一时间内大量触发同一事件，只会执行一次函数，例如search搜索联想，用户在不断输入值时，用防抖来节约请求资源。】

<input placeholder="输入" oninput="change()"/>
function debounce(fn,delay){
                var timer = null;
                return function(){
                    if(timer){
                        clearTimeout(timer);//进入该语句，说明当前正在一个计时过程中，并且触发了相同的事件，所以取消当前计时，重新开始计时
                    } 
                    timer = setTimeout(fn,delay)
                }
            }
            let searchfn = debounce(getchange,1000)
            function getchange(){
                console.log('输入框值改变了')
            }
             
            function change(){
                searchfn();
            }