欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS面试题之防抖节流(首次立即执行)

程序员文章站 2022-06-09 12:51:17
...
今天面试又问到了防抖节流的问题,本来觉着这个题目太easy了,都写烂了,结果面试官说需要首次执行,后来思考了一下实际应用中可能确实需要这个操作。
//简单版  所有操作均延迟
function debounce(fn, delay) {
      let timer = null;
      return function () {
        clearTimeout(timer)  //先清除定时器
        timer = setTimeout(() => {
          fn()}, delay)
        }
      }
    }


//加强版  首次立即执行
  function debounce(fn, delay) {
      let timer = null;
      let count = 0;
      let self = this
      return function () {
        let args= [...arguments] //取出参数
        clearTimeout(timer)  //先清除定时器
        if (!count) {//第一次点击的时候
          count++
          fn.apply(self,args)
          timer = setTimeout(() => {
            count = 0;
          }, delay)
        } else {
          count++
          timer = setTimeout(() => {
           fn.apply(self,args)
            count = 0;
          }, delay)
        }
      }
    }
    
  
//测试
let a = debounce((num) => (console.log(num)), 1000)
    window.onclick = () => {
      a()
}

后记: 大概就是这样,但是最后自己又产生了一些疑问,关于this指向,是不是要再加一个let self = this ,之后fn.call(self,args)呢?有清楚的朋友可以评论区一起交流。