关于javaScript中的防抖-debounce与节流-throttle

关于js中的防抖

首先，什么是防抖？是用来解决什么问题的？
防抖，是一种用来 优化性能 的技巧
例子：一个用于搜索的input输入框，希望可以输入内容后，自动出现一个下拉列表，列表中是可能的搜索项，如果单单给input加入change、keyup等事件，其实会很浪费性能，一般来说，应该是用户输入完后再给出一些输入建议。

这里给出代码和解释

 //这里拿到input输入框
 let searchInput = document.getElementById('input')
 	//这里定义一个变量，来保存延时定时器的标识
    let timer = null;
    //为input输入框添加事件
    searchInput.addEventListener('keyup', function () {
    //这里是判断是否已经存在延时定时器，如果存在，那说明用户刚输入完
        if (timer) {
        //用户刚输入完的话，就关闭旧定时器，因为旧定时器是判断上一次输入是否为短时间内最后一次输入的
            clearTimeout(timer)
        }
        //这里是新建一个延时定时器，如果500毫秒后还未输入新内容，这个定时器的传入的函数就会执行。
        timer = setTimeout(() => {
            console.log(searchInput.value);
            //最后这一步，节省内存空间
            timer = null
        }, 500);
    })

以上是直接使用的方式，但实际上，一般会封装起来，以重复使用

									//这里是传入一个需要执行的函数，以及一个防抖的时间
searchInput.addEventListener('keyup',debounce(()=>{
        console.log(searchInput.value);
    },300) )
					// 需要回调函数和时间作为参数
    function debounce(fn,date){
        let timer = null;
        	//注意，防抖函数只是要把需要执行的函数进行处理，处理后需要返回出去
        return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
        //在这里使用apply方法调用传入的函数，因为这个是会return出去的函数，所以this就是return出去后
        //所处环境的this，而arguments，是因为不知道需要被处理的函数有多少参数，
        //所以就把arguments放入即可
           fn.apply(this,arguments)
            timer = null
        }, date);
    }
    }

那么，节流是什么的？

同样，节流也是用来优化性能的
例子：加入页面有个拖拽元素，这个东西，如果我们快速的拖动，那么函数执行时候占用的内存是非常大的，容易造成卡顿现象。但实际上，我们并不需要它执行的那么快。也许，每隔100毫秒执行一次，就足够流畅的检测鼠标的位置了

    //节流 
    function throttle(fn,date){
        let timer = null;
      
        return function () {
        if (timer) {
            // 只有这里是有区别的，即为，如果有延时定时器存在，就不再产生新的定时器
            // 如此就实现了，每隔固定时间，连续执行的函数，才会执行一次，从而做到流畅且节约内存
            return
        }
        timer = setTimeout(() => {
           fn.apply(this,arguments)
            timer = null
        }, date);
    }
    }