函数的防抖与节流（debounce throttle）

函数防抖和节流知识点总结（debounce,throttle）

目的：

函数的节流和防抖目的都在于减少函数的执行次数

一、防抖的两个实现

1. 没有提供triggleNow 参数，函数第一次不会做延迟执行的操作

   
    let btn = document.getElementById('btn')//这里上面我们假定已经指定了一个按钮用于触发的debounce函数的执行
           btn.addEventListener('click', debounce1(submit, 1000))
   
           function submit() {
               console.log('我被点击了')
           }
   
   
    function debounce1(fn, time) {
               let t = null
               return function() {
                   if (t) {
                       clearTimeout(t)
                   }
                   t = setTimeout(() => {
                       // 这里的this  因为是在箭头函数中的，本身并没有this  找的是return 出去的函数的this  这个函数是btn 的点击事件触发执行的，所以this 为 button这个标签;同理的arguments也是这个函数中的arguments
                       
                       fn.apply(this, arguments)
                   }, time)
               }
           }
   

//2.有可以指定立即执行的版本 
        function debounce2(fn, time, triggleNow) {
            let t = null
            return function() {
             // 如果t值不为null，则需要清除定时器   
                if (t) {
                    clearTimeout(t)
                }

                if (triggleNow) {
                    // 如果t值为null 证明为第一次点击
                    let firstClick = !t  //取反为真
                    if (firstClick) {
                        // 立即执行
                        fn.apply(this, arguments)
                    }
                    t = setTimeout(() => {
                     // 在设定的时间内在此触发每次都会清除上一次的定时任务，使得回调函数一直没有执行，当定时任务时间到了就会把t设置为null ，这样再次触发会被再次认定为第一次点击
                        t = null
                    }, time)
                } else {
                    //如果没有设置triggleNow（undefined,null）,或者值为false,这version1版本一样
                    t = setTimeout(() => {
                        fn.apply(this, arguments)
                    }, time)
                }
            }
        }

二、节流（throttle）

思想：

节流的思想在于，设置一个延迟的时间， 当前时间减去上一次触发函数的时间 大于 设置的延迟时间的值是才让函数执行

实现：

      // 3.throttle节流
function throttle(fn, delay) {
            let begin = 0
            return function() {
                let currentTime = new Date().getTime()
                if (currentTime - begin > delay) {
                    fn.apply(this, arguments)
                }
                begin = currentTime
            }
        }