javascript面试题防抖节流

羅小子
羅小子
羅小子
12
文章
3
评论
一月 2, 202107:21:39 评论

在前端开发中经常会处理input事件和滚动条监听事件,为了更好提升性能开发者可以使用防抖节流

javascript面试题防抖节流

防抖(debounce):触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。防抖常应用于用户进行搜索输入节约请求资源,window触发resize事件时进行防抖只触发一次。

function debounce(fn) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      return function () {
        clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数
          fn.apply(this, arguments);
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖

节流(throttle):高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率。节流常应用于鼠标不断点击触发、监听滚动事件。

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true,不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false,在开头被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));
}
继续阅读
羅小子
javascript面试题继承实现的几种方式。 前端

javascript面试题继承实现的几种方式。

在面试中经常会被问到怎么实现一个继承?实现继承有那几种方式?问这个是要考面试者对于js的基础掌握程度。 如果要实现继承,肯定需要一个父类,先定义一个父类: // 定义一个人 function Peop...
javascript面试题数组去重 前端

javascript面试题数组去重

前端对于数组去重有很多种方法,面试时能说出3-4种基本就可以了 。 // 全局变量 const arr = ; 双重循环加splice() 这种方法是通过双重循环判断值是否相等如果相等就使用splic...
整理vue面试题(二) 前端

整理vue面试题(二)

vue常见面试题整理第二章: 1.vue优点? 轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 2.vue父组件向子组件传递数据? 通过属性方式传递数据,子组件...
整理vue面试题(一) 前端

整理vue面试题(一)

Vue.js是前端三大框架之一,很多公司都在使用。相比于其它两个框架,vue的学习成本是最低,也是最容易上手的。深受后端程序猿的喜爱。 一,生命周期面试题 1.什么是vue的生命周期? vue生命周期...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: