防抖

XiNGRZ 发布于2019-08-23 14:52 / 1439人阅读

摘要：防抖的中心思想在于我会等你到底。这次的司机比较有耐心。第一个乘客上车后，司机开始计时比如说十分钟。而认为，最后一个人说了算，会为每一个新乘客设定新的定时器。

防抖的中心思想在于：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。

继续讲司机开车的故事。这次的司机比较有耐心。第一个乘客上车后，司机开始计时（比如说十分钟）。十分钟之内，如果又上来了一个乘客，司机会把计时器清零，重新开始等另一个十分钟（延迟了等待）。直到有这么一位乘客，从他上车开始，后续十分钟都没有新乘客上车，司机会认为确实没有人需要搭这趟车了，才会把车开走。

我们对比 throttle 来理解 debounce：在throttle的逻辑里，“第一个人说了算”，它只为第一个乘客计时，时间到了就执行回调。而 debounce 认为，“最后一个人说了算”，debounce 会为每一个新乘客设定新的定时器。

我们基于上面的理解，一起来写一个 debounce：

// fn是我们要包装的回调函数事件，delay每次等待都执行时间
function debounce(fn, delay) {

// 定时器；
let timer = null;

return function() {
    // 保存上下文的this
    let context = this
    // 保存传入的参数
    let args = arguments;
    // 每次调用前都清空定时器
    if (timer) {
        clearTimeout(timer)
    }
   // 去设立一个新的定时器
   timer = setTimeout (function() {
        fn.apply(context, args);    
   }, delay)
}

}
// 用throttle来包装scroll的回调
let better_scroll = debounce(() => {console.log("触发了滚动事件"), 1000});
document.addEventListener("scroll", better_scroll);

云服务器海外云主机防抖 VUE防抖 VUE防抖与节流

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

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

防抖 - 理解，实践与实现

摘要：本文主要讨论防抖，镜像文章节流理解，实践与实现。分开讨论防抖和节流，主要是为了让一些还不太了解防抖节流的读者能够有针对性地，逐一掌握它们。防抖是什么结合上方案例，防抖可以理解为多次触发事件后，事件处理函数只执行一次。为了完整阅读体验，欢迎移步到我的博客原文。防抖（去抖），以及节流（分流）在日常开发中可能用的不多，但在特定场景，却十分有用。本文主要讨论防抖，镜像文章：节流 - 理解，...

yangrd 2019-08-26 12:20 评论0 收藏0
详谈js防抖和节流

摘要：本文会分别介绍什么是防抖和节流，它们的应用场景，和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。本文由小芭乐发表 0. 引入首先举一个例子：模拟在输入框输入后做ajax查询请求，没有加入防抖和节流的效果，这里附上完整可执行代码：没有防抖 ...

shevy 2019-08-23 13:54 评论0 收藏0
彻底弄懂函数防抖和函数节流

摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。原博客地址，欢迎star 函数防抖和节流函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 评论0 收藏0
JS进阶篇2---函数防抖（debounce）

摘要：函数防抖的要点，是需要一个来辅助实现，延迟运行需要执行的代码。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。而非立即执行版指的是触发事件后函数会立即执行，然后秒内不触发事件才能继续执行函数的效果。。 JS中的函数防抖一、什么是函数防抖概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重...

zhongmeizhi 2019-08-23 18:19 评论0 收藏0
说说JavaScript中函数的防抖 (Debounce) 与节流 (Throttle)

摘要：基础防抖我们现在写一个最基础的防抖处理标记事件也做如下改写现在试一下，我们会发现只有我们停止滚动秒钟的时候，控制台才会打印出一行随机数。为何要防抖和节流有时候会在项目开发中频繁地触发一些事件,如 resize、 scroll、 keyup、 keydown等，或者诸如输入框的实时搜索功能，我们知道如果事件处理函数无限制调用，会大大加重浏览器的工作量，有可能导致页面卡顿影响体验；后台...

yanwei 2019-08-23 18:10 评论0 收藏0
初探函数节流和函数防抖—以项目为例(更新es6语法)

摘要：而上述两种方法，就叫做函数的节流和防抖。二函数节流和函数防抖函数节流函数节流函数节流是让这个函数在间隔某一段时间执行一次。在这个项目中，我认为函数节流和函数防抖都能很好的解决问题。一项目需求最近在做一些小的练手代码的时候，碰到了一个很常见的问题，当在搜索框中进行搜索的时候，如果快速输入很多字符的话，搜索框的监听回调函数会执行很多次，如果回调业务较复杂的话，可能会导致页面运行缓慢甚...

赵连江 2019-08-20 17:03 评论0 收藏0