防抖和节流函数最简版

防抖和节流函数最简版

防抖: 多次触发事件只执行一次(适用于断续的事件, 比如 clickinput)

 1 function debounce(fn, time) {
 2   let timeout
 3   return () => {
 4     if (timeout) {
 5       clearTimeout(timeout)
 6     }
 7     timeout = setTimeout({
 8       fn
 9     }, time)
10   }
11 }

节流: 在指定时间内多次触发事件只执行一次(适用于连续的事件, 比如 scroll)

function throttle(fn, time) {
  let preTime = 0
  return () => {
    const remainTime = time - (Date.now() - preTime)
    if (remainTime <= 0) {
      fn()
      preTime = Date.now()
    }
  }
}

原文地址:https://www.cnblogs.com/wangtao-/p/10437261.html

时间: 2024-11-09 16:20:38

防抖和节流函数最简版的相关文章

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

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

防抖和节流(较全&amp;可体验)

防抖(debounce) 概念 事件被触发经过单位时间(delay)后再执行回调,如果在单位时间内又被触发,则重新计时. 防抖函数 const debounce = (cb, delay = 1000) => { let timer = null; return function (...args) { const context = this; if (timer) clearTimeout(timer); timer = setTimeout(() => { cb.apply(contex

节流函数&amp;防抖函数 柯里化函数

/* onscroll onresize input ..... 节流函数 让高频率事件进行减少触发变成低频率事件 var bStop = true; window.onscroll = function() { if(!bStop){ return; } bStop = false; setTimeout(()=>{ var t = document.documentElement.scrollTop || document.body.scrollTop; console.log(t); bS

函数防抖与节流

1.为什么会有函数的防抖与节流及使用场景 在进行窗口的resize.scroll,输入框内容校验或者向后端发起ajax等操作时, 如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕. 此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果. 2.函数防抖与函数节流的概念及实现原理 函数防抖(debounce): 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了

前端进击的巨人(八):浅谈函数防抖与节流

本篇课题,或许早已是烂大街的解读文章.不过春招系列面试下来,不少伙伴们还是似懂非懂地栽倒在(-面试官-)深意的笑容之下,权当温故知新. JavaScript的执行过程,是基于栈来进行的.复杂的程序代码被封装到函数中,程序执行时,函数不断被推入执行栈中.所以 "执行栈" 也称 "函数执行栈". 函数中封装的代码块,一般都有相对复杂的逻辑处理(计算/判断),例如函数中可能会涉及到 DOM 的渲染更新,复杂的计算与验证, Ajax 数据请求等等. 前端页面的操作权,大部分

函数防抖和节流*(性能优化不错的选择)

函数节流: 频繁触发,但只在特定的时间内才执行一次代码 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码(如果一个事件被频繁触发多次,节流函数可以按照固定频率去执行对应的事件处理方法) 两者区别在于函数节流是固定时间做某一件事,比如每隔1秒发一次请求.而函数防抖是在频繁触发后,只执行一次(两者的前提都是频繁触发) 函数节流的应用场景一般是onrize,onscroll等这些频繁触发的函数,比如你想获取滚动条的位置,然后执行下一步动作,如果监听后执行的是Dom操作,这样的频繁

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 // 当当前时间减去上一次执行时间大于这个指定

函数的防抖和节流

防抖 所谓防抖,就是指触发事件后在n秒内函数只能触发一次,如果在n秒内又触发了事件,则会重新计算函数执行时间. /* 防抖函数 @param {Function} func 要执行的函数 @param {Number} wait 要等待的时间 ms */ function debounce(func, wait) { let timer = null; return function () { let context = this; let args = arguments; timer &&am

vue函数防抖和节流

Vue函数防抖和节流https://zhuanlan.zhihu.com/p/72363385 <template> <div> <input type='text' v-model='value' @keydown = "hangleChange"> </div> </template> <script> function debounce(func, wait=1000){ let timeout; retur