最近刚接触两个新概念函数防抖与函数节流,虽然这些内容网上可以搜到很多,大家都有自己的一套的理解方式,都写得很好, 而自己则想在理解的基础上自己把代码实现一遍,加深印象. 一.函数防抖 假如我们有这样的函数,控制台打印input的值 function getInput(){ console.log(document.getElementById('input').value); } 而当我们直接监听input的keyup事件调用getInput方法时,效果是这样的 每当我们输入一个字符,getIn…

概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期 函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象. 比如如下的情况: window对象的resize.scroll事件 拖拽时的mousem…

函数防抖和函数节流都是老生常谈的问题了.这两种方式都能优化 js 的性能.有些人可能会搞混两个的概念.所以,我以自己的理解,来解释这两个概念的含义.并且列举在小程序中这两个方法的使用. 函数防抖: 英文 debounce 有防反跳的意思,大致就是指防止重复触发. 那么,函数防抖,真正的含义是:延迟函数执行.即不管debounce函数触发了多久,只在最后一次触发debounce函数时,才定义setTimeout,到达间隔时间再执行 需要防抖的函数. 用处:多用于 input 框 输入时,显示匹配的…

(1)函数防抖debounce 函数触发停止一段时间后(期间不能再触发 debounce,否则将重新计时),再执行回调函数 机制: 防抖函数主要利用定时器的延迟执行特性,根据是否有定时器在等待执行: 触发了一个事件后:如果有一个定时任务待执行,就清除定时器,重新计时. 如果没有任务待执行,就定时执行这个事件. #应用场景: 表单的连续点击,防止重复提交.比如重复发送一篇文章. 类百度的搜索,连续输入等输入停止后再搜索. 一直拖动浏览器窗口,只想触发一次事件等. (2)函数节流throttle 规…

用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45'));   写出JS中声明对象的三种方法. Var obj={ name:名字, Say:function(){ Alert(‘sssss’); } }     Var obj=new Object();     Var obj={} Obj.name=’名字’; Obj.say=function(){ Ale…

js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的) 一.总结 1.open的post方式send函数带参数:如果连接服务器open函数中的请求方式是post方式的话,那么向服务器发送请求的send需要带上参数(默认get方式的话是直接url带参数,…

参考链接:https://juejin.im/post/5b651dc15188251aa30c8669 参考链接:https://www.jb51.net/article/158818.htm 在我们前端开发中,我们经常会需要绑定一些持续触发的事件,如 resize.scroll.mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数. 通常这种情况下我们怎么去解决的呢? 一般来讲,防抖和节流是比较好的解决方案. 函数节流(throttle)与 函数防抖(d…

前端原生方法的实现,这里写一下常见的一些实现: 1.bind Function.prototype.bind2 = function (context) { var self = this; returnfunction () { self.apply(context); } } 2.promise class Promise { result: any; callbacks = []; failbacks = []; constructor(fn) { fn(this.resolve.bind…

1. 在JS中, 函数声明: stringObject.substring(start,stop) start是在原字符串检索的开始位置,stop是检索的终止位置,返回结果中不包括stop所指字符. 如:"hamburger".substring(4,8) returns "urge" 2. substr(start,length) 如:当DETAIL_TYPE 的值为1111053 时,substr(DETAIL_TYPE,1,6)  = 111105 从DETA…

[嵌套循环特点]                           外层循环转一次,内层循环转一圈              外层循环控制行数,内层循环控制每行元素个数             [做图形题思路]              1确定图形一共几行  极为外层的循环的次数             2确定每行有几种元素,代表有几个内层循环.             3 确定每种元素的个数,即为每个内层循环的次数                 tips:通常:找出每种元素个数,与行号的关…

(JavaScript 中,函数的参数传递方式都是按值传递,没有按引用传递的参数) 一.数据类型 在 javascript 中数据类型可以分为两类: 基本类型值 primitive type,比如Undefined,Null,Boolean,Number,String. 引用类型值,也就是对象类型 Object type,比如Object,Array,Function,Date等. 变量的复制 众所周知,js中变量的基本类型和引用类型保存方式是不同的,这也就导致变量复制时也就不同了.如果从一个变…

JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中function(){}里面没有特殊指定this的指向,这里的this时指向Window,但是在严格模式下,function(){return this}里面的this是undefined,箭头函数里面的this反而是Window,我们来看个例子(为了简单点,代码下面的>就是控制台的输入,<就是控…

JS函数有两种命名方式 1.声明式 声明式会导致函数提升,function会被解释器优先编译.即我们用声明式写函数,可以在任何区域声明,不会影响我们调用. function XXX(){} 2.函数表达式 函数表达式我们经常使用,而函数表达式中的function则不会出现函数提升.而是JS解释器逐行解释,到了这一句才会解释. 因此如果调用在函数表达式之前,则会调用失败. var k = function(){} fn1(); function fn1(){}//可以正常调用 fn2(); var…

函数防抖(debounce) 应用场景 登录.发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖 文本编辑器实时保存,当无任何更改操作一秒后进行保存 实现方法,防抖重在清零 function debounce(f, wait){ let timer return (...args) => { clearTimeout(timer) timer = setTimeout(() => { f(…

一.ES6 允许使用"箭头"(=>)定义函数. // var f = v => v;// 上面的箭头函数等同于: // var f = function(v) {// return v;// };// 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分.如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回. // 由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错. 箭头函…

普通函数:this指向分为4种情况,1. obj.getName();//指向obj2.getName();//非严格模式下,指向window,严格模式下为undefined3. var a = new A();   a();//指向A本身4.getName().apply(obj);//指向obj 箭头函数:箭头函数本身是没有this和arguments的,在箭头函数中引用this实际上是调用的是定义时的上一层作用域的this.这里强调的是上一层作用域,是因为对象是不能形成独立的作用域的.例如…

在JavaScript中,函数可以 作为值赋给一个变量 作为参数传递给另一个函数 作为另一个函数的返回值 所以我们说JavaScript的函数是“一等公民”. 赋值: var foo = function() { console.log("Hello World!"); }; foo(); 以上代码把一个匿名函数( Anonymous Function)赋值给了变量foo.你也可以使用具名函数,这样有利于Debug,但要注意,使用具名函数不会影响函数的调用方法,仍然是通过变量名加一对圆…

1. eacape(): 该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / .其他所有的字符都会被转义序列替换.其它情况下escape,encodeURI,encodeURIComponent编码结果相同. escape对0-255以外的unicode值进行编码时输出%u****格式 可以使用 unescape() 对 escape() 编码的字符串进行解码. ECMAScript v3 反对使用该方法,应用使用 deco…

/*最流行的写法*/ (function() { alert("run!") })(); /* !号可以有1~正无穷个,所以这一种就可以衍生无数种方式 */ !!!(function() { alert("run!") })(); (function() { alert("run!") }).call(); (function() { alert("run!") }).apply(); (function() { alert(…

从上周开始,我所在的学习小组正式开始了angular的学习,angular是全面支持es6的,所以语法上和以前的angular有了很大的不同,比如变量声明时就抛弃了var,而选择了let和const:记得刚开始学习js的时候,使用webstrom时用var,webstrom会在下面画一条小绿线,表示这个用法,问题不大,但是有点问题.因为webstrom推荐使用最新的标准,之后问过学长,他说这是es6的语法,暂时不用管,防止浏览器不兼容. 终于,现在到了学习es6的时候. const与let co…

先上一段让大家比较蒙圈的代码,接下来再慢慢讲解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> console.log(f…

Ps. 晚上加班到快十点,回来赶紧整理整理这篇文章,今天老大给我推荐了一篇文章,我从写技术博客中收获到了什么?- J_Knight_,感受也是很多,自己也需要慢慢养成记录博客的习惯,即使起步艰难,难以坚持,但还是要让自己加油加油. 前两天把我整理的[复习资料]ES6/ES7/ES8/ES9资料整理(个人整理)分享给大家啦. 正文内容开始: 1.介绍 个人简单理解为,一个函数可以接收其他函数作为参数,这种函数便称为高阶函数,而主要目的就是为了能接收其他函数作为参数. Q: 为什么可以接收一个函数作…

在ECMAScript5中没有块级作用域一说,只有函数作用域和全局作用域,在其中声明的变量和函数和其他语言的展现形式不同,在某些情况下不一定需要先定义后使用,函数和变量的使用可以在其声明之前,这到底是怎么回事呢?让我们一起揭开变量声明提前的神秘面纱!!! 一.变量声明提升 var a = 10; function test() { a = 100; alert(a); alert(this.a); var a; alert(a); } test(); 这题考的也是变量声明提升,函数作用域中提前使…

今天研究了一下bind函数,发现apply和call还可以有这样的妙用,顺便巩固复习了闭包. var first_object = { num: 42 }; var second_object = { num: 24 }; function multiply(mult) { return this.num * mult; } Function.prototype.bind = function(obj) { var method = this, temp = function() { retur…

先看看一个简单的代码 var str='Hello World'; alert(str);//弹出 Hello World 再看一段代码: var v='Hello World'; (function(){ alert(v); })() //和我们预期的一样,还是弹出 Hello World 那么铺垫完了,继续coding var str='Hello World'; (function(){ alert(str); var str='I love coding...'; })() //出乎我们…

/** * 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 wait,func 才会执行 * * @param {function} func 传入函数,最后一个参数是额外增加的this对象,.apply(this, args) 这种方式,this无法传递进函数 * @param {number} wait 表示时间窗口的间隔 * @param {boolean} immediate 设置为ture时,调用触发于开始边界而不是结束边界 * @return {function} 返回客户调用…

concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf() – 返回字符串中一个子串第一处出现的索引.如果没有匹配项,返回 -1 . charAt() – 返回指定位置的字符. lastIndexOf() – 返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回 -1 . match() – 检查一个字符串是否匹配一个正则表达式. substring() – 返回字符串的一个子串.传入参数是起始位置和结束位置. replace() – 用来查找匹配一个…

1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 3,四舍五入. js: Math.round(7/2) 4,向下取整 js: Math.floor(7/2)…

/** * javascript Date format(js日期格式化) * 对Date的扩展,将 Date 转化为指定格式的String 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 例子: (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 (ne…

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /** * Window 是一个非常重要的对象 */ console.log(this); /*function alert(){ }*/ //al…