初探函数节流和函数防抖—以项目为例(更新es6语法)

赵连江发布于2019-08-20 17:03 / 3445人阅读

摘要：而上述两种方法，就叫做函数的节流和防抖。二函数节流和函数防抖函数节流函数节流函数节流是让这个函数在间隔某一段时间执行一次。在这个项目中，我认为函数节流和函数防抖都能很好的解决问题。

一项目需求

最近在做一些小的练手代码的时候，碰到了一个很常见的问题，当在搜索框中进行搜索的时候，如果快速输入很多字符的话，搜索框的监听回调函数会执行很多次，如果回调业务较复杂的话，可能会导致页面运行缓慢甚至是奔溃，那么我们如何解决这个问题呢，让输入框在不在输入的情况下执行回调，或者每间隔一段时间执行一次回调都可以解决这一问题。而上述两种方法，就叫做函数的节流和防抖。

二函数节流和函数防抖 2.1 函数节流

函数节流：函数节流是让这个函数在间隔某一段时间执行一次。以输入框为例，假设你想查询xxxx,你想实现当我开始输入多少秒之后，执行查询操作。（并不一定要输入完毕）
想看效果请点击这里

2.2 函数防抖

函数防抖：函数防抖是让这个函数在执行上一次之后过了你规定的时间再执行的一种方法。以输入框为例，假设你要查询xxxx，你想实现当我输完了xxxx之后，再进行查询操作，那么你就需要用到函数防抖。
经典的函数防抖实践如下：

function throttle(method,context){
  clearTimeout(method.tId)
  method.tId = setTimeout(function(){
    method.call(context) 
   },1000)
}

想看效果请点击这里

三最佳实践

通过上叙的描述，我们对于函数防抖和函数节流有了一定的认识。在这个项目中，我认为函数节流和函数防抖都能很好的解决问题。所以这里把函数节流和函数防抖封装在了一个函数里，通过第三个参数切换模式。代码如下

const throttle = function(fn, delay, isDebounce) {
  let timer
  let lastCall = 0
  return function (...args) {
    if (isDebounce) {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn(...args)
      }, delay)
    } else {
      const now = new Date().getTime()
      if (now - lastCall < delay) return
      lastCall = now
      fn(...args)
    }
  }
}

通过第三个参数，可以控制到底使用函数防抖还是函数节流。

四总结

函数防抖实现的核心在于每次都去clear一个延时器，然后每次执行函数的时候，都去clear以前的延时器。只有当你中断输入的时候，才会去执行相应回调。而函数节流的核心是去判断当前时间和开始时间的间隔是否到达了设置的delay值，如果达到了，就执行一次回调。没有则不执行。

私有云海外云主机函数节流 js函数节流 VUE防抖与节流服务器更新时间函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83362.html

前端常用代码片段(三)

摘要：可以是数字或者是字符串如果是数字则表示属性名前加上空格符号的数量，如果是字符串，则直接在属性名前加上该字符串。最后更新于2019年1月13日前端常用代码片段(一) 点这里前端常用代码片段(二) 点这里前端常用代码片段(三) 点这里前端常用代码片段(四) 点这里前端常用代码片段(五) 点这里前端常用代码片段(六) 点这里 1.打乱数组中元素顺序（类似音乐随机播放） function...

U2FsdGVkX1x 2019-08-21 16:25 评论0 收藏0
H5学习

摘要：为此决定自研一个富文本编辑器。本文，主要介绍如何实现富文本编辑器，和解决一些不同浏览器和设备之间的。对ES6Generator函数的理解 Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。 JavaScript 设计模式 ② 巧用工厂模式和创建者模式我为什么把他们两个放在一起讲？我觉得这两个设计模式有相似之处，有时候会一个设计模式不能满...

aristark 2019-08-22 11:21 评论0 收藏0
JavaScript专题系列20篇正式完结！

摘要：写在前面专题系列是我写的第二个系列，第一个系列是深入系列。专题系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 专题系列是我写的第二个系列，第一个系列是 JavaScript 深入系列。 JavaScript 专题系列共计 20 篇，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 评论0 收藏0
函数防抖Debounce和函数节流Throttle

摘要：函数节流函数防抖函数节流和函数防抖函数节流和函数防抖二者很容易被混淆起来。函数防抖函数在特定的时间内不被再调用后执行。一句话概括函数节流是从用户开始输入就开始计时，而函数节流是从用户停止输入开始计时。函数节流 & 函数防抖函数节流和函数防抖函数节流和函数防抖二者很容易被混淆起来。下面贴英文原文，建议认真阅读：Debouncing enforces that a function ...

NicolasHe 2019-08-22 15:23 评论0 收藏0