如何在面试中手写出javascript节流和防抖函数

面试的时候我们经常会问别人是理解什么是节流和防抖,严格的可能要求你写出节流和防抖函数,这里我们抛开loadsh工具库手写节流和防抖

1.节流函数throttle

// 节流方案1,每delay的时间执行一次,通过开关控制
function throttle(fn, delay, ctx) {
  let isAvail = true
  return function () {
    let args = arguments // 开关打开时,执行任务
    if (isAvail) {
      fn.apply(ctx, args)
      isAvail = false // delay时间之后,任务开关打开
      setTimeout(function () { isAvail = true }, delay)
    }
  }
}
// 节流方案2,通过计算开始和结束时间
function throttle(fn,delay){
      // 记录上一次函数出发的时间
      var lastTime = 0
      return function(){
      // 记录当前函数触发的时间
      var nowTime = new Date().getTime()
      // 当当前时间减去上一次执行时间大于这个指定间隔时间才让他触发这个函数
      if(nowTime - lastTime > delay){
        // 绑定this指向
        fn.call(this)
        //同步时间
        lastTime = nowTime
      }
      }
    }

2.防抖debounceTail

2.1)只执行首次

// 防抖 且首次执行
// 采用原理:第一操作触发,连续操作时,最后一次操作打开任务开关(并非执行任务),任务将在下一次操作时触发)
function debounceStart(fn, delay, ctx) {
  let immediate = true
  let movement = null
  return function() {
    let args = arguments

    // 开关打开时,执行任务
    if (immediate) {
      fn.apply(ctx, args)
      immediate = false
    }
    // 清空上一次操作
    clearTimeout(movement)

    // 任务开关打开
    movement = setTimeout(function() {
      immediate = true
    }, delay)
  }
}

2.2)只执行最后一次

// 防抖 尾部执行
// 采用原理:连续操作时,上次设置的setTimeout被clear掉
function debounceTail(fn, delay, ctx) {
  let movement = null
  return function() {
    let args = arguments

    // 清空上一次操作
    clearTimeout(movement)

    // delay时间之后,任务执行
    movement = setTimeout(function() {
      fn.apply(ctx, args)
    }, delay)
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-10-21

如何解决js函数防抖、节流出现的问题

React中使用防抖函数和节流函数 在React事件调用时,React传递给事件处理程序是一个合成事件对象的实例.SyntheticEvent对象是通过合并得到的. 这意味着在事件回调被调用后,SyntheticEvent 对象将被重用并且所有属性都将被取消. 这是出于性能原因. 因此,您无法以异步方式访问该事件.React合成事件官方文档 所以在用防抖或节流函数封装时,异步方式访问事件对象出现问题.解决的方法如下: 方法一:调用合成事件对象的persist()方法 event.persist

JS函数节流和函数防抖问题分析

问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办? **问题2:**如果给一个按钮绑定了表单提交的post事件,但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交,如何防止多次提交的发生? 为了应对如上场景,便出现了 函数防抖 和 函数节流 两个概念,总的来说: 这两个方法是在 时间轴上控制函数的执行次数. 函数防抖(debounce) 概念: 在事件被触发n秒后再执行回调,如果在这n秒内

浅谈JavaScript节流和防抖函数

概念 节流函数 间隔固定的时间执行传入的方法 目的是防止函数执行的频率过快,影响性能.常见于跟滚动,鼠标移动事件绑定的功能. 防抖函数 对于接触过硬件的人也许更好理解,硬件按钮按下时,由于用户按住时间的长短不一,会多次触发电流的波动,加一个防抖函数就会只触发一次,防止了无意义的电流波动引起的问题. 按键防反跳(Debounce)为什么要去抖动呢?机械按键在按下时,并非按下就接触的很好,尤其是有簧片的机械开关,会在接触的瞬间反复的开合多次,直到开关状态完全改变. 应用在前端时,常见的场景是,输入框

简单实现节流函数和防抖函数过程解析

在日常开发中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询ajax,影响浏览器性能,所以需要用到节流函数:实现手机号.姓名之类的的验证,往往我们只需要验证一次,这个时候我们就需要用到防抖函数:但是网上的很多资料都是不够具体和便于理解.今天自己翻阅了一些资料之后,来简单的谈谈我对节流函数和防抖函数的理解,希望能帮助大家理解: 节流函数 顾名思义,就是节省流量节省内存性能的一种函数,可以理解为是一种性能优化方案: 举个例子:一个水龙头一直在滴水,可能一次性会滴很多

一文看懂如何简单实现节流函数和防抖函数

前言 在日常开发中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询ajax,影响浏览器性能,所以需要用到节流函数:实现手机号.姓名之类的的验证,往往我们只需要验证一次,这个时候我们就需要用到防抖函数:但是网上的很多资料都是不够具体和便于理解.今天自己翻阅了一些资料之后,来简单的谈谈我对节流函数和防抖函数的理解,希望能帮助大家理解: 节流函数 顾名思义,就是节省流量节省内存性能的一种函数,可以理解为是一种性能优化方案: 举个例子:一个水龙头一直在滴水,可能一次性会

浅析JavaScript 函数防抖和节流

函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处.先从使用场景做个区分. 防抖使用场景: 表单输入框校验 提交按钮避免重复提交 节流使用场景: scroll,mousemove,resize等 函数防抖(debounce) 表单输入框校验在用户不停的打字输入时并不需要向后台校验文本,只有当用户停下来一定时间后,这时候默认用户已经输入完毕了可以开始向后台提交文本了. 表单的提交按钮被用户多次连续点击时,显然并不需要每次点击都提交表单.仅在用户不点击之后,把最后一次的点击操作

Vue中函数防抖节流的理解及应用实现

防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 实现原理 函数防抖的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行. 使用场景 文本框输入搜索(连续输入时避免多次请求接口) 代码实现 /** * 函数防抖

JS函数节流和防抖之间的区分和实现详解

在写JS时,这两个函数比较常见,有时候傻傻分不清用哪个,或者说知道代码要怎么写,但要说出它究竟是节流函数还是防抖函数时一脸楞逼.今天有一个同学分享了这两个的区分,我也来回顾一下,加深一下印象,以便日后用到时心里有底.PS:百度和谷歌搜索前几个介绍都是相反介绍,本文为原创,如有雷同纯属抄袭我的. 节流概念(Throttle) 按照设定的时间固定执行一次函数,比如200ms一次.注意:固定就是你在mousemove过程中,执行这个节流函数,它一定是200ms(你设定的定时器延迟时间)内执行一次.没到

浅谈VUE防抖与节流的最佳解决方案(函数式组件)

前言 有echarts使用经验的同学可能遇到过这样的场景,在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的,resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的.还有一个常见的场景在input标签的input事件里请求后端接口,input事件也是连续触发的,假设我输入了"12"就会请求两次接口参数分别是"1"和"12",比浪费网络资源更要命的是如果参数为&quo

js防抖函数和节流函数使用场景和实现区别示例分析

本文实例讲述了js防抖函数和节流函数使用场景和实现区别.分享给大家供大家参考,具体如下: 开发过程中,都遇到过某个事件被频发触发的场景,比如resize,scroll事件,input事件,而对应的事件处理函数也会被高频率调用,这时会增加浏览器负担,用户体验也不好,这也是防抖函数和节流函数存在的意义和使用场景. 函数防抖(debounce): 持续触发事件时,在设定时间段内没有被触发,才去调用事件处理函数,在设定时间段内如果事件又被触发,则不调用事件处理函数,并从触发事件时间重新开始延时. 具体实

javascript函数的节流[throttle]与防抖[debounce]

防抖和节流 窗口的resize.scroll,输入框内容校验等操作时,如果这些操作处理函数较为复杂或页面频繁重渲染等操作时,如果事件触发的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少触发的频率,同时又不影响实际效果. 这两个东西都是为了项目优化而出现的,官方是没有具体定义的,他们的出现主要是为了解决一些短时间内连续执行的事件带来性能上的不佳和内存的消耗巨大等问题: 像这类事件一般像 scroll keyup

vue实现输入框的模糊查询的示例代码(节流函数的应用场景)

上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数: 输入框的模糊查询功能原理分析 所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息),百度的搜索功能

js防抖和节流的深入讲解

前言: 我们在做页面事件绑定的时候,经常要进行节流处理,比如鼠标异步点击,去执行一个异步请求时,需要让它在上一次没执行时不能再点击,又或者绑定滚动事件,这种持续触发进行dom判断的时候,就要按一定频率的执行. 本文主要给大家介绍了关于js防抖和节流的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 0. 引入 首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码: <!DOCTYPE html> <html la

JS防抖和节流实例解析

日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为debounce(防抖)和throttle(节流) 函数防抖 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次. function debounce(fn, wait) { va

详解JavaScript节流函数中的Throttle

首先我们来了解下什么是Throttle 1. 定义 如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出. 也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期. 接口定义: * 频率控制 返回函数连续调用时,action 执行频率限定为 次 / delay * @param delay {number} 延迟时间,单位毫秒 * @param action {function} 请求关联函数,实际应用需要调用的函数 *

Vue自定义指令封装节流函数的方法示例

节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子: function throttle (method, context) { clearTimeout((method.tId)) method.tId = setTimeout(function () { method.call(context) }, 100) } function resizeDiv

详解js中class的多种函数封装方法

本文实例讲解了js中class的多种函数封装方法,分享给大家供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于class的多种函数封装</title> <style> body{ margin: 0; } li{ height: 20px; } </style