节流防抖函数小记

函数节流

1.高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。
2.动作绑定事件,动作发生后一段时间后触发事件,在这段时间内,如果动作又发生,则无视该动作,直到事件执行完后,才能重新触发。
3.懒加载的时间需要监听浏览器的滚动条位置(不用 每次都去触发,只要降低计算的频率),做放大镜预览的时候监听鼠标移动位置的时候,以及抢购点击多次请求。

const throttle = (fn, delay) => {
      let last = 0
      return (...args) => {
          const now = +new Date()
          if(now - last > delay){
            fn.apply(this, args)
            last = +new Date()
          }
      }
  }

函数防抖

1.触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
2.动作绑定事件,动作发生后一定时间后触发事件,在这段时间内,如果该动作又发生,则重新等待一定时间再触发事件。
3.实时搜索,拖拽,form 表单重复提交验证

const debounce = (fn, delay) => {
      return (...args) => {
        clearTimeout(fn.id)
        fn.id = setTimeout( ()=> {
          fn.call(this,args)
        }, delay)
      }
  }

箭头函数

1. 更简洁的函数
() => {
	console.log("hellow")
}
2. 没有单独的this

在箭头函数出现之前,每一个新函数根据它是被如何调用的来定义这个函数的this值:
如果是该函数是一个构造函数,this指针指向一个新的对象
在严格模式下的函数调用下,this指向undefined
如果是该函数是一个对象的方法,则它的this指针指向这个对象

3. 通过 call 或 apply 调用
4. 不绑定arguments

通过 …arguments 实现

call apply 区别

apply() 方法调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数。
call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

该方法的语法和作用与 apply() 方法类似,只有一个区别,就是 call() 方法接受的是一个参数列表,而 apply() 方法接受的是一个包含多个参数的数组。

发布了36 篇原创文章 · 获赞 8 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览