防抖和节流

1、防抖：就是规定在一段时间内，事件只执行一次，如果在规定的时间里面，再次触发该事件，那么将会重新计时
2、例子：老师告诉学生们，如果在一个星期内不会上课睡觉，就奖励一颗棒棒糖，如果在这段时间内，有人违规了，那么就从这一刻开始重新计时，过一个星期就可以领到棒棒糖了
3、代码示例如下：
function  debounce(fn,wait) {
    let timer = null
    return function() {
        clearTimeout(timer)  //如果在规定事件再被触发，就会清空，然后重新计时
        timer = setTimeout(() => {
            fn.apply(this,arguments)
        },wait)
    }
}

function  test() {
    console.log("hello")
}

let  testid = document.getElementById("test")

//给点击元素绑定事件

window.addEventListener('click',debounce(test,1000))

1、节流：规定在一段时间内执行一次
2、例子：老师告诉学生们，一周内在课堂上只允许放一次影片观看，如果在这一周内观看了一次影片，那么接下来学生观看电影的请求，老师都不会答应的

3、代码示例如下
function throttle(fn,wait) {
    let ishas = true   //定义一个标志，在这段时间是否被允许
      return function () {
      if (ishas){
        ishas = false  //一旦事件被执行，立刻赋值为false，这个变量是一个闭包，所以在这段时间内一旦有一个事件被执行，就永远显示为false，防止这段时间内被执行多次事件
        setTimeout( () => {
            fn.apply(this,arguments)
            ishas = true  //事件执行完毕，重新赋值为true
        },wait)
    }else{
        return
    }
      }
}

function  test() {
    console.log("hello")
}

let  testid = document.getElementById("test")

//给点击元素绑定事件

window.addEventListener('click',throttle(test,2000))