本专栏主要是一些实用技巧,带大家灵活运用、并理解其思想;另外后续也会开设js核心知识方面的专栏带大家深入理解js这门语言。由于个人刚完成js阶段的学习,却没有什么项目经验,另外感觉自己基础也不是很好;所以梳理了下js学习过程中个人认为必须掌握的一些知识点、技巧等,以此为后期的学习打下坚实的基础。
前端开发中会遇到一些频繁的事件触发,像是resize、scroll、mousedown、mousemove、keyup、keydown等。
防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法。
在 Google I/O ’17 上,Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。
函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片。由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的。反而形成一种视觉效果,就是一张图。就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样。 同理,可以类推到js代码。在一定时间内,代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多,带来的效果也是一样。倒不如,把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源,又能让页面浏览更加顺畅,不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。
看到这个标题就懵了, 你会有以下几个问题:什么是防抖? 什么是节流? 如何使用防抖? 如何使用节流? 什么时候需要用到防抖和节流? 为什么要用防抖和节流? 那我们就围绕这几个问题来讲一讲防抖与节流的两个概念和简单应用吧~ 我会在正文中给大家逐个解答问题
例如,下表给出了相对于http://www.test.com:80/index.html 端口号不写,默认为80.。
在 JavaScript 中,防抖和节流其实是一个很重要的概念。主要应用场景就是会频繁触发的事件,比如监听滚动、点赞功能,总不能点一次赞就向后台发送一次数据,这时候就要用到防抖和节流。
节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
关于防抖和节流函数的详细分析请看以下两篇文章,此处不再重述,本文章主要讲述运用过程中出现的问题
今天为大家带来一篇JS重难点的知识体系,这也是前端高薪必备的重难点知识,而且防抖与节流在各大企业前端面试过程中经常会考到的高频面试题!
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
函数节流是减少函数的触发频率;函数防抖是延迟函数执行,且不管触发多少次都只执行最后一次
一脸懵逼,真的是。这两个英文单词都是什么鬼(原谅我英文词汇量太烂),后来看了下,原来是防抖和节流的意思啊。
b.输入框事件:验证手机号或者邮箱,用户输入时不断触发键盘事件,应该等用户结束输入之后,以最后一次输入为准
可以看到,我们只要输入一个字符,就会触发这次ajax请求。不仅从资源上来说是很浪费的行为,而且实际应用中,用户也是输出完整的字符后,才会请求。下面我们优化一下:
防抖和节流是两个JS中的概念,它们被广泛应用于被频繁触发的事件中,如搜索框在输入时会弹出候选列表:如果每次输入都发送一个AJAX请求来获取数据,那么后台就要被刷爆了。所以,这里就引出了本文要介绍的概念。
在实际开发中,我们会遇到这么一个场景:我们需要注册一个事件,但有时候这个事件会在短时间内频繁触发,事件频繁的执行会导致浏览器进行大量的计算而引发页面卡顿假死的情况,为些我们需要通过一些手段来解决这个问题,所以就有了防抖和节流这两个技术。
Hello小伙伴们,因为Ajax绕去http了几天,今天又回到了JS,今天要为大家介绍的是防抖和节流,听起来就很厉害的样子吧~想必大家在生活中也会经常干这种事情,比如在浏览一个网站的时候,要点击一个按钮,当这个点击动作没有做出反应的时候,用户便会一直不停的按,又或者再有滚动条的页面,不断上下滚动鼠标等等,都会造成不断触发事件甚至不断发送请求,为了防止这个就要采用防抖和节流的方法了。
其实是可以用匿名函数来简化上面的代码的,但是只能简化setTimeout里面的函数
比如说吃饭。吃饭说明规定,五个小时吃一次。吃了一次饭,小狗蹦蹦哒哒地玩了五个小时。五个小时一到, 小狗再回来吃饭。依次类推,每五小时回来吃一次饭。
使用场景:click、onMouseOver,onMouseMove,resize,input,scroll等
因为事件处理程序在web中可以实现交互等其他功能,所有我们很多开发者都会在页面中大量的使用事件处理,在js中每一个函数都是对象,都占用内存空间,而且我们快速触发事件,可能因为事件的先后顺序而导致交互延迟或者卡顿。我们往下说一下解决方法。
1. 解释一下在js里,0.1+0.2为什么等于0.30000000000000004,如何通过代码解决这个问题?
浏览器的一些事件,如:resize,scroll,keydown,keyup,keypress,mousemove等。这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用。会加重浏览器的负担,导致用户体验非常糟糕,不知哪个大神发明了防抖和节流,用来控制回调函数的次数。
当用户频繁的与UI界面操作交互时,例如:窗口调整(触发resize),页面滚动,上拉加载(触发scroll),表单的按钮提交,商城抢购疯狂的点击(触发mousedown),而实时的搜索(keyup,input),拖拽等
用JS操作DOM,是比较慢的。为什么呢?首先,补充一下浏览器相关的知识。下图为浏览器结构:
解释:当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。
节流字面意思就是节省流动,这里的流动映射到js优化中可以简单的理解为操作,节流就是减少操作的进行,比如我们滚动页面的时候,如果不做节流的操作,假设我们滚动一次就请求一次函数,函数单一的还好, 如果函数本身就执行的比较麻烦的函数,这个时候我们的页面可能会出现卡死的情况,cpu也吃不消,这个时候我们需要的是,滚动的时候我们加个时间控制,不管你滚动的多快只要不超过我们设置的时间间隔,我都不给你执行即可,这个过程就是节流,那么代码实现就是通过一个闭包加上时间延迟进行实现。
记录工作和学习中的一些可能会被面试问到的JS内部实现基础,由于笔者水平有限,提供出的答案不一定准确,但是原理尽可能会讲清楚,以后会进行逐步添加。 bind实现 bind实现其实是内部调用apply或者call来实现对象的this绑定,具体实现可以参考如下: var o = { a: 1, b: 2, print: function() { console.log(this.a); console.log(arguments); } }; va
使用的时候,通过监听到达底部的变量改变,可以做想做的事情,比如加载更多,或跳转页面等。
props与state都是用于组件存储数据的一js对象,前者是对外暴露数据接口,后者是对内组件的状态,它们决定了UI界面显示形态,而若想要用户与界面有些交互动作
这段代码的顺序是1、2、3、4,原因是js同步执行完任务前不会执行异步任务(这是很容易理解大家也应该知道的)。然后Promise对象实例化是一个同步的过程,只有then后面的才是异步。所以1,2是同步任务,3,4是异步任务,现在的顺序就很合理了。
如搜索框中,每改变一个数值就请求一次搜索接口,当快速的改变数值时并不需要多次请求接口,这就需要一个防抖函数:
防抖(debounce):事件内的N个动作会变忽略,只有事件后由程序触发的动作只是有效。
在平时开发的时候我们总会遇到长列表,因为本身web在长列表的性能并不是特别好;加之web本身受到网络波动影响特别大,在首屏同时加载过多的内容会导致卡顿不流畅响应速度慢等问题。对此我们常用懒加载机制来进行优化。
我们在对窗口的resize、scroll进行事件监听时,可能会导致事件处理函数被无限制调用,这样做会增加浏览器负担,如果事件处理函数有AJAX的话会造成无限次请求,给服务器也带来了负担。
在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次):
在写JS时,这两个函数比较常见,有时候傻傻分不清用哪个,或者说知道代码要怎么写,但要说出它究竟是节流函数还是防抖函数时一脸楞逼。今天有一个同学分享了这两个的区分,我也来回顾一下,加深一下印象,以便日后用到时心里有底。PS:百度和谷歌搜索前几个介绍都是相反介绍,本文为原创,如有雷同纯属抄袭我的。
对象的深度克隆是很困难的。 JSON.parse(JSON.stringify(obj)) 可以实现对象的深度克隆。但有如下缺点:
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
我们可以将这个定义进行一下拆分: 1、所谓函数节流指的就是一个函数。 2、该函数的执行需要一个周期进行控制。 3、周期内调用该函数不执行,否则会执行。
防抖: 就是指触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间。(延时器 重新计时) 节流: 就是指连续触发事件但是在设定的一段时间内中只执行一次函数。(定时器)
作为一个曾经的Java coder, 当我第一次看到js里面的装饰器(Decorator)的时候,就马上想到了Java中的注解,当然在实际原理和功能上面,Java的注解和js的装饰器还是有很大差别的。本文题目是Vue中使用装饰器,我是认真的,但本文将从装饰器的概念开发聊起,一起来看看吧。
本文内容主要翻译自issue 中国外大佬对防抖与节流的解释, 后面补充了自己的理解和总结。
防抖 debounce 和节流 throttle 的概念并不是 JS 所特有的。它们是在对函数持续调用时进行不同控制的两个概念。今天我们先介绍防抖。
前端开发者对函数防抖和函数节流或多或少有些了解,最近在做一个H5编辑器的项目,由于画布功能复杂,计算量较大,在鼠标拖拽操作时尤其是在低配电脑上能够明显感受到卡顿,自然联想运用函数防抖(debounce)和函数节流(throttle)来优化 mousemove 等实时计算方法的计算频率再合适不过了。
作者:前端林子 https://cloud.tencent.com/developer/article/1380512
函数防抖是某一段时间内只执行一次;而函数节流是间隔时间执行,不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。
领取专属 10元无门槛券
手把手带您无忧上云