underscore 节流函数使用

2024-11-02

理解Underscore中的节流函数

上一篇中讲解了Underscore中的去抖函数(_.debounced),这一篇就来介绍节流函数(_.throttled). 经过上一篇文章,我相信很多人都已经了解了去抖和节流的概念.去抖,在一段连续的触发中只能得到触发一次的结果,在触发之后经过一段时间才可以得到执行的结果,并且必须在经过这段时间之后,才可以进入下一个触发周期.节流不同于去抖,节流是一段连续的触发至少可以得到一次触发结果,上限取决于设置的时间间隔. 1 理解函数节流通过这张我手画的图,我相信可以更容易理解函数节流这个概念. 在

underscore.js中的节流函数debounce及trottle

函数节流 throttle and debounce的相关总结及想法一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeout函数 clearTimeout(cancelTimer); cancelTimer =setTimeout(function(){ switchControl.switchAciontFactory(view, conf); },300) 代码的意思就不做多说了,实际上我无意间实现了一个debou

[手写系列] Spirit带你实现防抖函数和节流函数

前言防抖函数和节流函数,无论是写业务的时候还是面试的时候,想必大家已经听过很多次了吧.但是大家在用到的时候,有了解过他们之间的区别嘛,他们是如何实现的呢?还是说只是简单的调用下像lodash和underscore这种第三方库提供给我们的节流和防抖函数呢? 本文接下来将会带你们了解下这两者的区别,以及我们该如何手写实现这两个函数. 防抖函数和节流函数的区别防抖函数:是指触发了一个事件,在规定的时间内,如果没有第二次事件被触发,那么他就会执行.换句话讲,就是说,如果不断有事件被触发,那么规定的执

Javascript性能优化之节流函数

在我们的工作中往往有这样的需求,下拉上拉加载实现无限加载列表数据这样的一个功能,这个时候小伙伴们可能就觉得这个功能几分钟的事,于是乎,下边这段代码浩浩荡荡就出来了 window.addEventListener('scroll',function(){ // 判断滚动条有没有到底部 },false) 看似上面这段代码没有什么问题,然后我们给这段代码再加一段代码看一下 window.addEventListener('scroll',function(){ // 判断滚动条有没有到底部 conso

JS奇淫巧技：防抖函数与节流函数

应用场景实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮通过监听 resize 事件,对某些自适应页面调整DOM的渲染(通过CSS实现的自适应不再此范围内) 通过监听 keyup 事件,监听文字输入并调用接口进行模糊匹配 ... 常规实现,以监听 scroll 事件为例我们先来看一下scroll事件的触发频率 window.onscroll = function () { //滚动条位置 let sc

JS 防抖函数和节流函数

文章转载自:木上有水什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次事件绑定,造成性能的浪费! 1.防抖什么是防抖:多次事件触发后.事件处理函数只执行一次,并且是在触发操作结束时执行. 原理:延时操作处理函数.若设定的延时到来之前.再次触发函数.则清除上一次的延时操作定时器.重新定时.(有点绕,试验一下就懂了) 代码(例:scroll): let timer; w

js节流函数和js防止重复提交的N种方法

应用情景经典使用情景:js的一些事件,比如:onresize.scroll.mousemove.mousehover等: 还比如:手抖.手误.服务器没有响应之前的重复点击: 这些都是没有意义的,重复的无效的操作,设置对整个系统的影响还可能是致命的,所以我们要对重复点击的事件进行相应的处理! 节流函数所谓的节流函数顾名思义,就是某个时刻限制函数的重复调用. 同样节流函数也是为了解决函数重复提交的问题,而防止重复提交的方法,不止节流函数一种实现. 方法汇总本文整理了我在工作实践当中,觉的防止j

JavaScript防抖节流函数

1.直接上码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>debounce-throttle</title> <script type="text/javascript"> //节流函数:时间戳节流,规定时间内一定执行一次 function throttle(fn, delay){ var prev = Da

js节流函数高级版

节流函数其主要作用就是防止用户在短时间内多次触发该事件. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body><script> function throttle(fn, delay, duration) { v

vue实现输入框的模糊查询（节流函数的应用场景）

上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数: 输入框的模糊查询功能原理分析所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息),百度的搜索功能

js实现防抖函数和节流函数

防抖函数(debounce) 含义:防抖函数指的是在特定的时间内没有再次触发,才得以进行接下来的函数运行: 用途:当window.onresize不断的调整大小的时候,为了避免不断的重排与重绘,可以用防抖函数设置在onresize完成后一段时间内不再有窗口大小变动,此时再进行dom的重排重绘: function debounce(fun,delay){ var timer = null; return function(){ if(timer !=== null){ clearTimeout(t

JS基石之-----防抖节流函数

防抖和节流函数阅读目录一 .防抖函数二 .节流函数三 .个人理解两者的区别一.防抖函数 1.1 概念: 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间. 1.2 使用场景: 就像是我的搜索栏功能,是在里面内容变化后就实时触发搜索事件,但是有时候我们输的内容很长,在没有输完的时候就触发了事件,这样对性能来说是不好的,造成了很多无用的请求,这时候就需要用到防抖函数,来让其在搜索内容变化后的200毫秒内如果没有再更改才发起请求. 1.3 实现

throttle(节流函数) 与 debounce(防抖动函数)理解与实现

我们会对一些触发频率较高的事件进行监听,(如:resize scroll keyup事件) 如果在回调里执行高性能消耗的操作(如反复操作dom, 发起ajax请求等),反复触发时会使得性能消耗提高,浏览器卡顿,用户使用体验差. 或者我们需要对触发的事件延迟执行回调,此时可以借助throttle/debounce函数来实现需求. throttle: 节流函数在一个时间段内只执行一次 debounce:防抖函数连续触发事件的时候,事件监听函数不会立即执行,而是等我们一段时间内不再触发事件的时候,

关于js节流函数throttle和防抖动debounce

废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消耗.拿scroll来说,没有处理时滑动一次滚动条scroll事件会触发多次,如果其中涉及的代码偏重,那么性能消耗肯定是非常大.使用节流和防抖就是去优化这种情况,通过同的使用场景决定使用的对象,接下来就对比一下两者的区别. throttle 在指定的delay(延迟时间)内,在delay间隔内多次调用

vue防抖节流函数---组件封装,防止按钮多次点击

1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} isDebounce [1,3]为防抖组件,[2]为节流组件 * @param {this} ctx this 的指向 */ const debounce = (func, time, isDebounce, ctx) => { var timer, lastCall, rtn; // 防抖函数 i

vue 防抖节流函数——组件封装

防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 节流(throttle) 所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数.节流会稀释函数的执行频率. 就相当于,一个水龙头在滴水,可能一次性会滴很多滴,但是我们只希望它每隔 500ms 滴一滴水,保持这个频率.即我们希望函数在以一个可以接受的频率重复调用. vue 封装utils.js const debounce = (func, time,

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

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

简单的节流函数throttle

在实际项目中,总会遇到一些函数频繁调用的情况,比如window.resize,mouseover,上传进度类似的触发频率比较高的函数,造成很大的性能损耗,这里可以使用节流函数来进行性能优化,主要是限制函数被频繁调用的解决方案: let throttle = function(fn,interval){ let __self = fn,timer,firstTime = true; return function(){ var args = arguments,__me = this; if(fi

Js中的防抖与节流函数

1.何为防抖与节流函数呢? 1.防抖(debounce):通过setTimeout方式,在一定的时间间隔内,将多次触发的事件转化为一次触发.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次举例:当用户在进行表单提交时,用户提交一次就向服务器发送一次请求,当用户频繁地点击提交,则很自然地就向服务器多次请求,则会对服务器压力很大,那我们就需要想办法解决这种问题 2.节流(throuttle):当持续触发事件时,保证在一定时间内只调用一次事件处理函数

分时函数 & 节流函数

分时函数 & 节流函数 1.函数节流 JavaScript 中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则我们一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景下,函数有可能被非常频繁地调用,而造成大的性能问题.下面将列举一些这样的场景 (1). 函数被频繁调用的场景 window.onresize 事件.我们给 window 对象绑定了 resize 事件,当浏览器窗口大小被拖动而改变的时候,这个事件触发的频率非

underscore 节流函数使用

热门专题