精华内容
下载资源
问答
  • 防抖节流是高频操作的优化方案防抖是把连续的高频操作优化为最后一次操作(常用方案略有不同,此处仅介绍思路),节流是将高频操作降频,固定时间内执行一次。先通过触发浏览器的mousemove事件来介绍一下防抖和...

    防抖和节流是高频操作的优化方案,防抖是把连续的高频操作优化为最后一次操作(常用方案略有不同,此处仅介绍思路),节流是将高频操作降频,固定时间内执行一次。

    先通过触发浏览器的mousemove事件来介绍一下防抖和节流的实现:

    1 // html

    2

    3

    0

    4

    5

    6 // js

    7 functioncount() {

    8 document.getElementById('content').innerHTML = Math.random().toFixed(6)

    9 }

    10

    11 window.onmousemove = count

    在不使用防抖的情况下直接给window绑定事件,只要鼠标移动,事件会一直被触发。

    1.防抖debounce

    可以在事件被触发时不直接执行处理函数,而是设定一个计时器,事件(短时间内)再次被触发就重新开始计时,直到超过一定间隔后才执行函数。

    1 functiondebounce(func, wait) {2 let timeout3 return function() {4 if(timeout) {5 clearTimeout(timeout)6 }7 timeout =setTimeout(func, wait)8 }9 }10 window.onmousemove = debounce(count, 1000)

    查看完整版:

    1

    2

    3

    4

    5

    6

    Debounce

    7

    8 *{9 margin: 0;10 padding: 0;11 border: 0;12 }13 #content{14 box-sizing: border-box;15 height: 100vh;16 width: 100vw;17 padding-top: 60px;18 background-color: #87ceeb;19 font-size: 60px;20 text-align: center;21 color: #fff;22 overflow: hidden;23 }24

    25

    26

    27

    0

    28

    29

    30 functioncount() {31 document.getElementById('content').innerHTML = Math.random().toFixed(6)32 console.info(Math.random().toFixed(6))33 }34 //window.onmousemove = count

    35

    36 //防抖 - 超过时间间隔后触发一次处理函数

    37 functiondebounce(func, wait) {38 let timeout39 return function() {40 if(timeout) {41 clearTimeout(timeout)42 }43 timeout =setTimeout(func, wait)44 }45 }46 //window.onmousemove = debounce(count, 1000)

    47

    48 //防抖 - 先执行一次处理函数

    49 functiondebounceAdvance(func, wait) {50 let timeout51 return function() {52 let context = this

    53 let args =arguments54 if(timeout) {55 clearTimeout(timeout)56 }57 let callNow = !timeout58 timeout = setTimeout(() =>{59 timeout = null

    60 func.apply(context, args)61 }, wait)62 if(callNow) {63 func.apply(context, args)64 }65 }66 }67 window.onmousemove = debounceAdvance(count, 500)68

    69

    View Code

    2.节流throttle

    节流是把高频操作降低到一段时间内(delay)执行一次,可以在第一次出发时创建一个时间戳prev,和再次触发事件的时间戳now比较,如果间隔大于delay就触发事件,重新计时

    1 //时间戳版

    2 let throttle = function(func, delay){3 let prev =Date.now()4 return function() {5 let now =Date.now()6 if(now - prev >=delay){7 func()8 prev =Date.now()9 }10 }11 }12 window.onmousemove = throttle(handle, 1000)

    或者使用定时器完成,完整版:

    1

    2

    3

    4

    5

    6

    Throttle

    7

    8 *{9 margin: 0;10 padding: 0;11 border: 0;12 }13 #content{14 box-sizing: border-box;15 height: 100vh;16 width: 100vw;17 padding-top: 60px;18 background-color: #87ceeb;19 font-size: 60px;20 text-align: center;21 color: #fff;22 overflow: hidden;23 }24

    25

    26

    27

    0

    28

    29

    30 functionhandle() {31 document.getElementById('content').innerHTML = Math.random().toFixed(6)32 console.info(Math.random().toFixed(6))33 }34 //window.onmousemove = handle

    35

    36 //时间戳版

    37 let throttle = function(func, delay){38 let prev =Date.now()39 return function() {40 let now =Date.now()41 if(now - prev >=delay){42 func()43 prev =Date.now()44 }45 }46 }47 //window.onmousemove = throttle(handle, 1000)

    48

    49 //定时器版

    50 let throttle2 = function(func, wait){51 let timeout52 return function() {53 if(!timeout){54 timeout = setTimeout(()=>{55 func()56 timeout = null

    57 }, wait)58 }59 }60 }61

    62 window.onmousemove = throttle2(handle, 1000)63

    64

    65

    View Code

    3.应用场景

    常用于用户不断改变浏览器大小、鼠标移动和输入验证的一些处理,这些最后触发一次的使用防抖即可;

    鼠标不断点击、鼠标滚动不断加载等适合使用节流throttle.

    说下我的案例:

    一个数据在线编辑平台,用户需要不断输入X、Y、Z坐标调整物体位置,希望不用离开输入框就能实时看到变化,如果监听keyup事件就会过于频繁,这时就适合使用防抖。

    另外一个是在地图中加载了20w+模型,每次移动地图都会触发模型的重新渲染,这是就需要再地图的move事件中进行一些干预,可以用防抖,不过幸运的是地图有moveend事件,也算是一种防抖吧。

    展开全文
  • 防抖节流防抖节流是对应的:防抖是规定时间内触发就一直延迟,直到规定时间内不触发了就执行最后一次事件;节流是执行第一次,在规定时间内不会再次触发,过了规定时间就会再次触发的。防抖代码:function ...

    防抖节流

    防抖和节流是对应的:

    防抖是规定时间内触发就一直延迟,直到规定时间内不触发了就执行最后一次事件;

    节流是执行第一次,在规定时间内不会再次触发,过了规定时间就会再次触发的。

    防抖代码:

    function debounce(fn, wait) {

    var timeout = null;//每次执行函数的时候如果上次没有执行完成就重新赋值

    return function() {

    if(timeout !== null)

    clearTimeout(timeout);//如果之前有定时器的话就清除定时器

    timeout = setTimeout(fn, wait);//每次触发都重新执行定时器

    }

    }

    // 处理函数

    function handle() {

    console.log(Math.random());

    }

    // 滚动事件

    window.addEventListener('scroll', debounce(handle, 1000));

    节流代码:

    时间戳方案

    var throttle = function(func, delay) {

    var prev = Date.now();

    return function() {

    var context = this;

    var args = arguments;

    var now = Date.now();

    if (now - prev >= delay) {

    func.apply(context, args);

    prev = Date.now();

    }

    }

    }

    function handle() {

    console.log(Math.random());

    }

    window.addEventListener('scroll', throttle(handle, 1000));

    定时器方案

    var throttle = function(func, delay) {

    var timer = null;

    return function() {

    var context = this;

    var args = arguments;

    if (!timer) {

    timer = setTimeout(function() {

    func.apply(context, args);

    timer = null;

    }, delay);

    }

    }

    }

    function handle() {

    console.log(Math.random());

    }

    window.addEventListener('scroll', throttle(handle, 1000));

    时间戳+定时器

    var throttle = function(func, delay) {

    var timer = null;

    var startTime = Date.now();

    return function() {

    var curTime = Date.now();

    var remaining = delay - (curTime - startTime);

    var context = this;

    var args = arguments;

    clearTimeout(timer);

    if (remaining <= 0) {

    func.apply(context, args);

    startTime = Date.now();

    } else {

    timer = setTimeout(func, remaining);

    }

    }

    }

    function handle() {

    console.log(Math.random());

    }

    window.addEventListener('scroll', throttle(handle, 1000));

    展开全文
  • 我们先举个例子:项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖。什么是函数防抖和...

    很高兴回答你这个问题,希望可以给你讲述清楚!

    我们先举个例子:

    项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖。

    什么是函数防抖和节流呢? 我们先来看下他们的概念

    函数防抖(debounce):

    在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时;典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时。

    函数节流(throttle):

    规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效; 典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只有一次生效。

    那我们代码如何实现这两个场景呢? 看下面例子

    防抖函数function debounce (fn) {

    let timerout = null

    return function () {

    let args = arguments

    let self = this

    clearTimeout(timerout)

    timerout = setTimeout(() => {

    fn.apply(self, args) // 传参数

    }, 200);

    }

    }

    window.addEventListener('scroll', debounce(function () {

    console.log(1)

    }))

    从以上例子可以看出,如果你快速调用这个函数 在定时器还没有出发之前就会被clear。

    节流函数function throttle (fn) {

    let timerout

    return function () {

    let args = arguments

    let self = this

    if (timerout) return

    timerout = setTimeout(() => {

    fn.apply(self, args)

    timerout = null

    }, 200);

    }

    }

    window.addEventListener('resize', throttle(function () {

    console.log(1)

    }))

    从以上可以看出当我们在缩放浏览器窗口的时候,在定时器还没有出发之前是不允许重复触发的!

    通过上面的例子相信你一定把防抖和节流搞清楚了,希望可以做做练习!

    展开全文
  • 在前端开发的过程中,我们经常会需要绑定一些...一般来讲,防抖节流是比较好的解决方案。让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。html 文件中代码如下let num = 1;let content = d...

    在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

    通常这种情况下我们怎么去解决的呢?一般来讲,防抖和节流是比较好的解决方案。

    让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。

    html 文件中代码如下

    let num = 1;

    let content = document.getElementById('content');

    function count() {

    content.innerHTML = num++;

    };

    content.onmousemove = count;

    在上述代码中,div 元素绑定了 mousemove 事件,当鼠标在 div(灰色)区域中移动的时候会持续地去触发该事件导致频繁执行函数。效果如下

    c8b86b09daf0

    可以看到,在没有通过其它操作的情况下,函数被频繁地执行导致页面上数据变化特别快。所以,接下来让我们来看看防抖和节流是如何去解决这个问题的。

    防抖(debounce)

    所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

    防抖函数分为非立即执行版和立即执行版。

    非立即执行版:

    function debounce(func, wait) {

    let timeout;

    return function () {

    let context = this;

    let args = arguments;

    if (timeout) clearTimeout(timeout);

    timeout = setTimeout(() => {

    func.apply(context, args)

    }, wait);

    }

    }

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

    我们依旧使用上述绑定 mousemove 事件的例子,通过上面的防抖函数,我们可以这么使用

    content.onmousemove = debounce(count,1000);

    效果如下

    c8b86b09daf0

    可以看到,在触发事件后函数 1 秒后才执行,而如果我在触发事件后的 1 秒内又触发了事件,则会重新计算函数执行时间。

    上述防抖函数的代码还需要注意的是 this 和 参数的传递

    let context = this;

    let args = arguments;

    防抖函数的代码使用这两行代码来获取 this 和 参数,是为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数。

    立即执行版:

    function debounce(func,wait) {

    let timeout;

    return function () {

    let context = this;

    let args = arguments;

    if (timeout) clearTimeout(timeout);

    let callNow = !timeout;

    timeout = setTimeout(() => {

    timeout = null;

    }, wait)

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

    }

    }

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

    使用方法同上,效果如下

    c8b86b09daf0

    在开发过程中,我们需要根据不同的场景来决定我们需要使用哪一个版本的防抖函数,一般来讲上述的防抖函数都能满足大部分的场景需求。但我们也可以将非立即执行版和立即执行版的防抖函数结合起来,实现最终的双剑合璧版的防抖函数。

    双剑合璧版:

    /**

    * @desc 函数防抖

    * @param func 函数

    * @param wait 延迟执行毫秒数

    * @param immediate true 表立即执行,false 表非立即执行

    */

    function debounce(func,wait,immediate) {

    let timeout;

    return function () {

    let context = this;

    let args = arguments;

    if (timeout) clearTimeout(timeout);

    if (immediate) {

    var callNow = !timeout;

    timeout = setTimeout(() => {

    timeout = null;

    }, wait)

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

    }

    else {

    timeout = setTimeout(function(){

    func.apply(context, args)

    }, wait);

    }

    }

    }

    节流(throttle)

    所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

    对于节流,一般有两种方式可以实现,分别是时间戳版和定时器版。

    时间戳版:

    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);

    效果如下

    c8b86b09daf0

    可以看到,在持续触发事件的过程中,函数会立即执行,并且每 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)

    }

    }

    }

    使用方式同上,效果如下

    c8b86b09daf0

    可以看到,在持续触发事件的过程中,函数不会立即执行,并且每 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)

    }

    }

    }

    }

    参考文章:

    展开全文
  • 一、什么是防抖节流Ps: 比如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,那得消耗多大的服务器资源,即使你的服务器资源很强大,也不带这么玩的。1. 防抖 – debounce...
  • 作为一名前端开发者,我们经常会处理各种事件,比如常见的click、scroll、 resize等等。仔细一想,会发现像scroll、scroll、onchange这类事件会...针对这种现象,目前有两种常用的解决方案防抖节流防抖(debou...
  • 1 js 的基本数据类型?2 JavaScript 有几种类型的值?...6 undefined undeclared 的区别?7 null 和 undefined 的区别?8 如何获取安全的 undefined 值?9 说几条写 JavaScript 的基本规范?10 JavaS...
  • script> html> 节流 节流与防抖基本是类似的,同样的,我们先来看看节流的效果: 可以看出,节流的效果是:在一定时间之内,被节流函数修饰的函数只会触发一次,有点像游戏里边的冷却时间。 节流的原理也很简单: ...
  • 今天胡哥为大家分享函数防抖和函数节流的相关原理以及具体实践场景,希望能够给各位小伙伴在工作中提供相应业务场景的解决方案。一、函数防抖概念:如在窗口resize、input输入、textarea输入等操作时,为避免性能...
  • 1. 防抖高频率事件在 n 秒内只触发一次,如果再次被触发,则重新计时方案设置定时器,当 n 秒内再次被触发,则清除定时器。提交document.getElementById('btn').addEventListener('click', submit)function submit()...
  • 伴随着前端ajax的应用场景越来越多,那就免不了一个整合的ajax优化解决方案了,自己优化太麻烦?没事,有它帮你解决:hajax ...轻松优化:接口数据缓存,防抖节流;体积小:9kb;针对端:浏览器(暂不打算支持服...
  • 定义及解读防抖函数 debounce 指的是一个函数在给定的时间内只执行一个回调,不管它触发了多少回调。如果我们将一个函数3秒的等待时间,我们将re-time 3秒内如果有一个函数调用请求3秒,然后执行这个函数不存在函数...
  • _.throttle(func, [wait=0], [options={}]) 参考 什么是防抖节流,他们的应用场景有哪些 方案三:如何判断图片出现在了当前视口 方案二使用的方法是: window.scroll 监听 Element.getBoundingClientRect() 并使用 ...
  • 前言:前几天在做小程序的时候,碰到一个问题就是通过canvas要搬动canvas画布中的某个...节流函数说明:节流其实就是减少逻辑触发的频率,实际机制就是利用了计时,在短时时间内不进行频繁触发const _.throttle = (f...
  • 后台回复【福利】限时9.9领取JS零基础入门课程防抖(去抖),以及节流(分流)在日常开发中可能用的不多,但在特定场景,却十分有用。最近有同学遇到了要做防抖的需求,那今天李老师就来讲解一下,什么是防抖。为了方便...
  • 作者: 山月行转发链接:https://mp.weixin.qq.com/s/rY1LbW95LR6AqF1Vcx_d1Q懒加载,顾名思义,在当前网页,滑动页面到能看到图片的时候再加载图片故问题拆分成两个:如何判断图片出现在了当前视口 (即如何判断我们...
  • 就是,为了防止事件在短时间内被多次触发的两种解决方案。网上巴拉巴拉一堆说法, 总结: 防抖:你狂点按钮也没有,等你冷静下来事件才会触发。 节流:游戏里面的技能冷却功能。好的,然后呢??然后呢?当然是...
  • 关于防抖与节流的应用方案

    千次阅读 2019-04-30 14:03:56
    防抖:一段时间完成一个操作;节流:定时完成操作。 应用场景: 防抖: 1、seach搜索联想,用户在不断输入输入值时,用防抖来节约请求资源。 2、windows触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个...
  • 防抖:一段时间完成一个操作; 节流:定时完成操作。 应用场景: 防抖: 1、seach搜索联想,用户在不断输入输入值时,用防抖来节约请求资源。 2、windows触发resize的时候,不断的调整浏览器窗口大小会不断的触发这...
  • 关于js防抖与节流的简介与方案总结 需求描述: 在项目中进行窗口的resize、scroll,输入框内容校验等操作中,如果事件处理函数调用的频率无限制,不仅加重浏览器的负担,也会导致用户体验非常糟糕。此时我们可以采用...
  • 函数节流(throttle): 如果持续触发事件,每隔一段事件只执行一次事件 应用场景 dom拖拽 射击游戏 鼠标移动 监听滚动事件 解决: 1.使用underscore.js库 https://underscorejs.net/# 2.手写(仿undersc
  • 防抖与节流

    2021-03-21 22:55:10
    防抖与节流 1.防抖 高频率事件在 n 秒内只触发一次,如果再次被触发,则重新计时 方案 设置定时器,当 n 秒内再次被触发,则清除定时器。 <button id="btn">提交</button> <script > document....

空空如也

空空如也

1 2 3 4 5 6
收藏数 119
精华内容 47
关键字:

防抖与节流方案