JS：防抖函数、节流函数实例

一、防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

思路：
每次触发事件时都取消之前的延时调用方法

function debounce(fn,delay){
   let timer;
   return (()=>{
     if(timer){
       clearTimeout(timer);
     }
      timer = setTimeout(fn,delay);
   }) 
 }
 
 function setXY () {
   console.log('1')
 }
 
 function clickbtn(){
   debounce(setXY,1000)
 }

二、节流

高频事件触发，但在n秒内只会执行一次

思路：
每次触发事件时都判断是否到达一定时间再触发函数。可用定时器或校验时间戳实现

定时器

   function throttle (fn, delay) {
            var timer = null;
            return function() {
                if (!timer) {
                    timer = setTimeout(function() {
                    	fn();
                        timer = null;
                    }, delay);
                }
            }
        }
        function handle() {
            console.log('Hello world');
        }
        window.addEventListener('click', throttle(handle, 1000));

应用场景：
防止用户连续多次点击提交表单、监听滚动、窗口大小、输入框内容校验等高频事件