函数的节流和函数的防抖

ThreeWords 发布于2019-08-22 16:20 / 3382人阅读

摘要：函数的节流和函数的防抖都是优化高频率执行的函数的一种方法。思路第一次调用的时候创建一个定时器，在指定的间隔时间之后运行代码，当第二次调用该函数时，清除前一次的定时器并另设置一个。

函数的节流和函数的防抖都是优化高频率执行的函数的一种方法。我们知道浏览器中某些计算和处理要比其他昂贵很多。比如DOM的操作。当一个操作dom的函数高频率执行时，我们可以根据情况进行节流或防抖的处理。

节流函数

在每个时间段里，最多只允许运行一次。比如说resize调整窗口，在调整窗口的过程中，事件一直在高频率的触发，我们可以利用节流函数让其在一定的间隔时间段内最多触发一次。用一个形象的比喻吧。生产线上的啤酒瓶排成队往前跑，一个行动迟缓的树懒，每一段时间内只能拿到一个瓶子。

思路：第一次调用的时候记录一下时间戳，之后每次运行的时候都和上一次调用的时候的时间戳比较差值，当差值大于等于某个值的时候才执行。

function throttle (action, delay) {
  let timeout = null
  let lastRun = 0
  return function () {
    if (timeout) {
      return
    }
    let elapsed = Date.now() - lastRun
    let context = this
    let args = arguments
    let runCallback = function () {
      lastRun = Date.now()
      timeout = false
      action.apply(context, args)
    }
    if (elapsed >= delay) {
      runCallback()
    } else {
      timeout = setTimeout(runCallback, delay)
    }
  }
}

防抖函数

在高频调用中，只有足够的空闲时间，代码才会执行一次，常见的就是input的change事件，只有停顿输入的事件大于指定的时间，代码才会执行一次。用一个形象的比喻吧。生活中的声控灯，只要你不停的说话，灯就不会熄灭，只有你安静的时间大于一定的值时，灯才会熄灭。

思路：第一次调用的时候创建一个定时器，在指定的间隔时间之后运行代码，当第二次调用该函数时，清除前一次的定时器并另设置一个。如果前一个定时器已经执行了，这个操作就没任何意义，如果前一个定时器还没执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。根据以上思路实现一个防抖函数。

function debounce(action, content, delay){
    let timeoutId = null;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function(){
            action.apply(content);
        }, delay);
    }
}

GPU云服务器云服务器函数节流 js函数节流 VUE防抖与节流存储过程和函数的区别

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

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

说说JavaScript中函数的防抖 (Debounce) 与节流 (Throttle)

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

yanwei 2019-08-23 18:10 评论0 收藏0
小菊花课堂之JS的防抖与节流

摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。前言陆游有一首《冬夜读书示子聿》——古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。详解在前端开发中，我们经常会碰到一些会持...

leoperfect 2019-08-23 13:53 评论0 收藏0
小菊花课堂之JS的防抖与节流

摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。前言陆游有一首《冬夜读书示子聿》——古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。详解在前端开发中，我们经常会碰到一些会持...

Yangder 2019-08-02 12:10 评论0 收藏0
函数的防抖和节流是个啥？？？

摘要：函数防抖和节流，都是控制事件触发频率的方法。封装一个函数，让持续触发的事件监听是我们封装的这个函数，将目标函数作为回调传进去，等待一段时间过后执行目标函数第二点实现了，再看第一点持续触发不执行。曾经面试时候被问到过这个，年少的我一脸无知。。。后来工作中遇到了一个场景：输入名称的同时去服务器校验名称是否重复，但发现之前的代码竟然都没做限制，输入一次发一次请求。简直忍不了，就在项目的u...

edagarli 2019-08-23 18:35 评论0 收藏0
函数的防抖和节流

摘要：当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行原理第一次调用函数创建一个定时器，指定的时间间隔后运行代码。第二次调用函数时，它会清除前一次的定时器并设置另一个。目的：节约性能开销，避免多次频繁的触发业务逻辑造成页面卡顿。应用场景：节流和防抖的核心其实就是限制某一个方法被频繁触发，比如说DOM事件的监听回调，input的keyup、keydown...

MasonEast 2019-08-26 14:00 评论0 收藏0