前端常见面试——防抖

防抖

什么是防抖?
触发事件后n秒内函数只会执行一次,
如果n秒内事件被再次触发,则重新计算时间;

实现步骤?
  触发事件(addEventListener)
  清楚定时(clearTimeout)
  设置定时(setTimeout)

html

<input type="button" value="防抖" id="input"></input>

JavaScript

<script>
    const btn = document.querySelector('input');
    function handDou() {
      console.log('已触发',this); // this指向window
    }
    // 防抖开始
    function antiShake(func,delay) {
      let timer;
      return function() {
        let that = this; // 存贮this指向
        let args = arguments; // 增加参数
        clearTimeout(timer);
        timer = setTimeout(function(){
          // func.call(that); // 改变this指向
          func.apply(that,args);
        },delay)
      }
    }
    btn.addEventListener('click',antiShake(handDou,1000));
  </script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、离职多久了 2、大约多久到岗 3、离这里多远 4、会考虑搬家吗 5、公司会加班 6、为什么要离职 7、你们这个...
    临渊鲸落阅读 1,282评论 0 1
  • 什么是函数防抖和函数节流?有什么区别? 概念 函数防抖 函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,如...
    郝晨光阅读 1,786评论 0 13
  • 一、html和css部分1、如何理解CSS的盒子模型?标准盒子模型:宽度=内容的宽度(content)+ bord...
    这是这时阅读 413评论 0 5
  • 前端面试秘籍 本文引用自掘进用户[A Loity] 2019年前端面试秘籍 一、html和css部分 1、如何理解...
    cj_jax阅读 820评论 0 6
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,620评论 0 11