防抖(debounce)和节流(throttle)

防抖(debounce)

当调用动作触发一段时间后,才会执行该动作,若在这段时间间隔内又调用此动作则将重新计算时间间隔

function debounce(method, timeout, context) {
  return function() {
    var args = arguments
    clearTimeout(method.timer)
    method.timer = setTimeout(() => {
      method.apply(context, args)
    }, timeout)
  }
}
function handleResize() {
  console.log(‘resize‘)
}
window.onresize = debounce(handleResize, 500, window)

节流(throttle)

预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新的时间周期

function throttle(method, timeout, context, cycle) {
  var startTime = +new Date()
  return function() {
    var args = arguments
    var currTime = +new Date()
    clearTimeout(method.timer)
    if (currTime - startTime >= cycle) {
      method.apply(context, args)
      startTime = currTime
    } else {
      method.timer = setTimeout(() => {
        method.apply(context, args)
      }, timeout)
    }
  }
}
function handleResize() {
  console.log(‘resize‘)
}
window.onresize = throttle(handleResize, 500, window, 2000)

原文地址:https://www.cnblogs.com/zhoulixue/p/11106010.html

时间: 2024-10-29 17:50:51

防抖(debounce)和节流(throttle)的相关文章

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

原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频繁触发事件,咋办呢?这时候就应该用到函数防抖和函数节流了! 准备材料: <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-col

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

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

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

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

函数防抖与函数节流

前言 有一些浏览器事件我们不希望它很频繁的触发,如调整窗口大小(onresize).监听滚动条滚动(onscroll),如果这些监听事件需要调用接口的话一秒内可能会调用上百次,这样坑定是有问题的. 函数防抖(debounce) 如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时). function debounce(fn,wait){ var timer = null; return fu

函数防抖VS函数节流

(1)函数防抖debounce 函数触发停止一段时间后(期间不能再触发 debounce,否则将重新计时),再执行回调函数 机制: 防抖函数主要利用定时器的延迟执行特性,根据是否有定时器在等待执行: 触发了一个事件后:如果有一个定时任务待执行,就清除定时器,重新计时. 如果没有任务待执行,就定时执行这个事件. #应用场景: 表单的连续点击,防止重复提交.比如重复发送一篇文章. 类百度的搜索,连续输入等输入停止后再搜索. 一直拖动浏览器窗口,只想触发一次事件等. (2)函数节流throttle 规

微信小程序之使用函数防抖与函数节流

函数防抖和函数节流都是老生常谈的问题了.这两种方式都能优化 js 的性能.有些人可能会搞混两个的概念.所以,我以自己的理解,来解释这两个概念的含义.并且列举在小程序中这两个方法的使用. 函数防抖: 英文 debounce 有防反跳的意思,大致就是指防止重复触发. 那么,函数防抖,真正的含义是:延迟函数执行.即不管debounce函数触发了多久,只在最后一次触发debounce函数时,才定义setTimeout,到达间隔时间再执行 需要防抖的函数. 用处:多用于 input 框 输入时,显示匹配的

节流throttle和防抖debounce

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

函数防抖和函数节流

函数防抖(debounce) ????什么是防抖?短时间内多次触发同一个事件,只执行最后一次,或者只在开始时执行,中间不执行. 使用防抖之绿色基础版 //绿色基础版: function debounce(doSomething,wait){ var timeout;//需要一个外部变量,为增强封装,所以使用闭包 return function(){ var _this = this, _arguments = arguments;//arguments中存着e clearTimeout(time

js、vue防抖函数、节流函数,工具类封装

防抖函数(可用于防止重复提交) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, 如果设定时间到来之前,又触发了事件,就重新开始延时.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次. /** * 防抖函数(可用于防止重复提交) * 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, * 如果设定时间到来之前,又触发了事件,就重新开始延时.也就是说当一个用户一直触发这个函数, * 且每次触发函数的间隔