面试题

函数防抖和函数节流

函数防抖(debounce)

当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间

函数节流(throttle)

预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新
周期

函数节流(throttle)与函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

函数防抖的应用场景

连续的事件,只需触发一次回调的场景有:
           1:搜索框搜索输入。只需用户最后一次输入完,再发送请求
           2:手机号、邮箱验证输入检测
           3:窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
函数节流的应用场景
  间隔一段时间执行一次回调的场景有:
           1: 滚动加载,加载更多或滚到底部监听
           2:谷歌搜索框,搜索联想功能
           3:高频点击提交,表单重复提交

相同点:

          都可以通过使用 setTimeout 实现。
          目的都是,降低回调执行频率。节省计算资源。

不同点:

函数防抖,在一段连续操作结束后,处理回调,利用 clearTimeout 和 setTimeout 实现。函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能。
函数防抖关注一定时间连续触发,只在最后执行一次,而函数节流侧重于一段时间内只执行一次。

2: 什么是事件委托?为什么要用事件委托?

什么是事件委托

事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件。

为什么要用事件委托

因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率越大,100个li就要占用100个内存空间。如果要用事件委托,就会将所有的操作放到js程序里面,只对它的父级(如果只有一个父级)这一个对象进行操作,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;

原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){})

window.onload 是在 dom 文档树加载完和所有文件加载完之后执行一个函数 document.ready 原生中

没有这个方法,jquery 中有 ().ready(function),在 dom 文档树加载完之后执行一个函数(注意,这里面 的文档树加载完不代表全部文件加载完)。(document).ready 要比 window.onload 先执行
window.onload 只能出来一次,$(document).ready 可以出现多次

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,692评论 0 7
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,679评论 1 32
  • 1、函数防抖和函数节流 概念 函数防抖(debounce):函数防抖,就是指触发事件后在 n 秒内函数只...
    马小超321阅读 403评论 0 0
  • HTML HTML5标签 媒体查询head部分写法 Doctype作用? 严格模式与混杂模式如何区分?它们有何意义...
    Mayo_阅读 721评论 0 8
  • 本文中讲述到的面试题: 说说对闭包的认识, 它解决了什么问题?跨域问题有哪些处理方式?for...in 和 for...
    写代码的胖猴子阅读 1,132评论 0 5

友情链接更多精彩内容