js 函数的防抖(debounce)与节流(throttle)

  原文:函数防抖和节流;

序言:

  我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频繁触发事件,咋办呢?这时候就应该用到函数防抖和函数节流了!

准备材料:

<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>

<script>
    let num = 1;
    let content = document.getElementById(‘content‘);

    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = count;
</script>

  这段代码, 在灰色区域内鼠标随便移动,就会持续触发 count() 函数,导致的效果如下:

  接下来我们通过防抖和节流限制频繁操作。

函数防抖(debounce)

  短时间内多次触发同一事件,只执行最后一次,或者只执行最开始的一次,中间的不执行。

// 非立即执行版
function debounce(func, wait) {
    let timer;
    return function() {
      let context = this; // 注意 this 指向
      let args = arguments; // arguments中存着e

      if (timer) clearTimeout(timer);

      timer = setTimeout(() => {
        func.apply(this, args)
      }, wait)
    }
}

  我们是这样使用的:

content.onmousemove = debounce(count,1000);

  非立即执行版的意思是触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。效果如下:

// 立即执行版
function debounce(func, wait) {
    let timer;
    return function() {
      let context = this; // 这边的 this 指向谁?
      let args = arguments; // arguments中存着e

      if (timer) clearTimeout(timer);

      let callNow = !timer;

      timer = setTimeout(() => {
        timer = null;
      }, wait)

      if (callNow) func.apply(context, args);
    }
}

  立即执行版的意思是触发事件后函数会立即执行,然后 n 秒内不触发事件才能继续执行函数的效果。用法同上,效果如下:

  

// 合成版
/**
   * @desc 函数防抖
   * @param func 目标函数
   * @param wait 延迟执行毫秒数
   * @param immediate true - 立即执行, false - 延迟执行
   */
function debounce(func, wait, immediate) {
    let timer;
    return function() {
      let context = this,
          args = arguments;

      if (timer) clearTimeout(timer);
      if (immediate) {
        let callNow = !timer;
        timer = setTimeout(() => {
          timer = null;
        }, wait);
        if (callNow) func.apply(context, args);
      } else {
        timer  = setTimeout(() => {
          func.apply
        }, wait)
      }
    }
}

节流(throttle)

  指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次... 。节流如字面意思,会稀释函数的执行频率。

  同样有两个版本,时间戳和定时器版。

// 时间戳版
function throttle(func, wait) {
    let previous = 0;
    return function() {
      let now = Date.now();
      let context = this;
      let args = arguments;
      if (now - previous > wait) {
        func.apply(context, args);
        previous = now;
      }
    }
}

  使用方式如下:

content.onmousemove = throttle(count,1000);

  效果如下:

  可以看到,在持续触发事件的过程中,函数会立即执行,并且每 1s 执行一次。

// 定时器版
function throttle(func, wait) {
    let timeout;
    return function() {
      let context = this;
      let args = arguments;
      if (!timeout) {
        timeout = setTimeout(() => {
          timeout = null;
          func.apply(context, args)
        }, wait)
      }
    }
}

  用法同上,效果如下:

  可以看到,在持续触发事件的过程中,函数不会立即执行,并且每 1s 执行一次,在停止触发事件后,函数还会再执行一次。

  我们应该可以很容易的发现,其实时间戳版和定时器版的节流函数的区别就是,时间戳版的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候。

  同样地,我们也可以将时间戳版和定时器版的节流函数结合起来,实现双剑合璧版的节流函数。

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版,2 表定时器版
 */
function throttle(func, wait ,type) {
  if (type === 1) {
    let previous = 0;
  } else if (type === 2) {
    let timeout;
  }
  return function() {
    let context = this;
    let args = arguments;
    if (type === 1) {
        let now = Date.now();

        if (now - previous > wait) {
          func.apply(context, args);
          previous = now;
        }
    } else if (type === 2) {
      if (!timeout) {
        timeout = setTimeout(() => {
          timeout = null;
          func.apply(context, args)
        }, wait)
      }
    }
  }
}

原文地址:https://www.cnblogs.com/cc-freiheit/p/10827372.html

时间: 2024-11-09 00:57:51

js 函数的防抖(debounce)与节流(throttle)的相关文章

防抖(Debounce)与节流( throttle)区别

throttle的作用是,预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新的时间周期.debounce的作用是,当调用动作触发一段时间后,才会执行该动作,若在这段时间间隔内又调用此动作则将重新计算时间间隔.debounce:把触发非常频繁的事件合并成一次执行.throttle:设置一个阀值,在阀值内,把触发的事件合并成一次执行:当到达阀值,必定执行一次事件. lodash.js中有两者很好的函数封装调用:_.throttle与_.debounce 当然也可以自

防抖(debounce)和节流(throttle)

防抖(debounce) 当调用动作触发一段时间后,才会执行该动作,若在这段时间间隔内又调用此动作则将重新计算时间间隔. function debounce(method, timeout, context) { return function() { var args = arguments clearTimeout(method.timer) method.timer = setTimeout(() => { method.apply(context, args) }, timeout) }

节流throttle和防抖debounce

underscore.js提供了很多很有用的函数,今天想说说其中的两个.这两个函数都用于限制函数的执行. debounce 在解释这个函数前,我们先从一个例子看下这个函数的使用场景.假设我们网站有个搜索框,用户输入文本我们会自动联想匹配出一些结果供用户选择.我们可能首先想到的做法就是监听keypress事件,然后异步去查询结果.这个方法本身是没错的,但是如果用户快速的输入了一连串的字符,假设是10个字符,那么就会在瞬间触发了10次的请求,这无疑不是我们想要的.我们想要的是用户停止输入的时候才去触

js函数的节流和防抖

js函数的节流和防抖 用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕 resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repaint)这会严重耗费浏览器性能,造成页面 卡顿. 举几个例子:比如说我们在滚动事件中要做一个复杂的计算,或者做一个按钮的防二次点击操作的需求,这些需求都会在频繁的事件 回调中做复杂计算,很有可能导致页面卡顿,这时候我们可以将多次计算合并为一次计算,只在一个精确点做操作.这些事可以利用 函数的防抖来实现

JavaScript 高级系列之节流 [throttle] 与防抖 [debounce]

一.概念 这两个东西都是为了项目优化而出现的,官方是没有具体定义的,他们的出现主要是为了解决一些短时间内连续执行的事件带来性能上的不佳和内存的消耗巨大等问题:像这类事件一般像 scroll keyup mousemove resize等等,短时间内不断的触发,在性能上消耗是非常大的,尤其是一些改变DOM结构的操作: 节流[throttle]与防抖[debounce]非常相似,都是让上述这类事件在规定的事件从不断的去触发更改成为规定的时间内触发多少次: 节流[throttle] 节流通俗来解释就比

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

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

js面试题之手写节流函数和防抖函数

函数节流:不断触发一个函数后,执行第一次,只有大于设定的执行周期后才会执行第二次 1 /* 2 节流函数:fn:要被节流的函数,delay:规定的时间 3 */ 4 function throttle(fn,delay){ 5 // 记录上一次函数出发的时间 6 var lastTime = 0 7 return function(){ 8 // 记录当前函数触发的时间 9 var nowTime = new Date().getTime() 10 // 当当前时间减去上一次执行时间大于这个指定

Js中的防抖与节流

在实际开发中,我们经常需要绑定一些持续触发的事件,如resize.scroll,mousemove,input等,浏览器在默认情况下会对事件处理函数无限制的调用,这样就会加重浏览器的负载,导致用户体验很差,有些还会频繁向后台请求数据,对服务器造成不必要的压力有些情况下我们不需要事件持续触发过程中频繁的去执行事件处理函数,或者更希望把多次计算合并成一次,只操作一个精确点.对此,我们可以采用防抖(debounce)和节流(throttle)的方式来减少调用频率,同时又不影响实际效果. 函数防抖(de

VUE中的函数的防抖和节流 以及应用场景

先看看概念 函数防抖(debounce): 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 应用场景: search搜索联想,用户在不断输入值时,用防抖来节约请求资源. window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次 函数节流(throttle): 规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效: