防抖和节流

实现:

<input type="text">

const ipt = document.querySelector('input')

    // 什么叫防抖:一个高频事件在设定时间内只能执行一次,若再次执行则重新计算这段时间

    // 封装一个防抖函数
    function fangdouFn(fn) {
    
      // 定义延时器id
      let timeout = null
      return function () {
      
        // 当再次触发事件时立马中断上一次事件的执行,配合延时器就初步完成了防抖功能
        clearTimeout(timeout)
        
        // 定义一个延时器
        timeout = setTimeout(() => {
        
          // 此处this为绑定事件的对象,arguments为事件对象
          fn.apply(this, arguments)
          
        }, 500)
      }
    }

    function say(v) {
      console.log(v)
      console.log('防抖成功')
    }

    window.addEventListener('input', fangdouFn(say))
------------------------------------------------------------------------------------------

    // 封装一个节流函数
    // 概念: 一个高频事件在设定时间内只能执行一次,执行完毕后才会执行下一次
    function jieliuFn(fn) {
    
      // 定义一个初始条件，此次定义只会在事件绑定时执行一次
      let flag = true
      return function () {
      
        // 判断是否符合条件,如果不符合则中断执行
        if (!flag) return
        
        // 改变初始条件
        flag = false
        
        // 定义一个延时器，目的是让事件执行时中间有空隙
        setTimeout(() => {
          fn.apply(this, arguments)
          
          // 改回初始条件，表示此次事件执行完毕可以再次执行
          flag = true
          
        }, 500)
      }
    }

    function sayToo(v) {
      console.log(v.target)
      console.log('节流成功')
    }

    window.addEventListener('resize', jieliuFn(sayToo))

完