美文网首页
前端常见面试——防抖

前端常见面试——防抖

作者: 幻城sh | 来源:发表于2021-04-21 17:45 被阅读0次

防抖

什么是防抖?
触发事件后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>

相关文章

  • 说说前端的防抖和节流以及最简单的实现

    防抖和节流在前端是很常见的知识点,并且也是常见的面试题。 00 背景 防抖和节流在前端中是应用很常见的,特别是在 ...

  • 前端常见面试——防抖

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

  • web前端学习中JavaScript常见函数的那些技巧实现

    在学习JavaScript,或者前端面试中,有人会问你节流函数、防抖函数、递归函数等,本文分享了5个常见函数,希望...

  • 前端防抖

    前端防抖

  • js防抖和节流

    一个垃圾前端为了面试准备的系列篇一:防抖和节流防抖和节流其主要的都是为了限制某些事件频繁执行,从而避免频繁执行导致...

  • 搞清楚节流和防抖

    节流(throttle)和防抖(debounce)是前端面试中非常高频的一道面试题,在实际项目开发中,也有很多实用...

  • 前端防抖截流以及常见应用

    前言 现在发现面试时候考察的防抖截流这个问题考察的东西不只这么简单了 面试官会结合各种应用案例去考察,比如模糊搜索...

  • 前端性能优化:手写实现节流防抖

    前端性能优化:手写实现节流防抖 本文首发于 前端性能优化:手写实现节流防抖[https://gitee.com/r...

  • js 防抖和节流

    防抖 防抖是js优化的重要的一部分,也是面试中手写代码最常考的题目。那么我们为什么要防抖?防抖是什么意思?比如我们...

  • 前端日常——防抖

    一、什么是防抖 指触发事件后在规定时间内回调函数只能执行一次,如果在规定时间内又触发了该事件,则会重新开始算规定时...

网友评论

      本文标题:前端常见面试——防抖

      本文链接:https://www.haomeiwen.com/subject/mkmzlltx.html