先重点说一下可能遇到的坑：主要在原本默认参数的设置以及两个方法的选择上，看完这篇总结你就知道怎么回事了~ throttle API走起 _.throttle(func, [wait=0], [options={}]) func (Function): 要节流的函数。 [wait=0] (number): 需要节流的毫秒数。 [options={}] (Object): 选项对象。 [options.leading=true] (boolean): 指定调用在节流开始前，默认true。 [options.trailing=true] (boolean): 指定调用在节流结束后，默认true。 throttle Demo走起（Vue写法）
|
1 2 3 4 5 6 |
testThrottle: _.throttle(function() { console.log("throttle"); }, 5000, { leading: true, trailing: false }) |
testThrottle方法被绑定在一个按钮上，demo最终的效果是 ： 1、按钮点击后控制台立马打印了throttle——19:39:00； 2、5秒内点击多次按钮，最终只打印一次throttle——19:39:05前； 3、5秒后再点击一次，会重新打印throttle——19:39:05后； PS：lodash默认trailing为true，那么最终的效果是在点击时会立即打印throttle，且5秒后又会再打印一次，即节流之前和之后都会执行该节流函数。 throttle 总结走起 预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新的时间周期。 简言之：结束时间点不会随点击改变 debounce API走起 _.debounce(func, [wait=0], [options={}]) func (Function): 要防抖动的函数。 [wait=0] (number): 需要延迟的毫秒数。 [options={}] (Object): 选项对象。 [options.leading=false] (boolean): 指定在延迟开始前调用，默认false。 [options.maxWait] (number): 设置 func 允许被延迟的最大值。 [options.trailing=true] (boolean): 指定在延迟结束后调用，默认true。 debounce Demo走起
|
1 2 3 4 5 6 |
testDebounce: _.debounce(function() { console.log("debounce"); }, 2000, { leading: true, trailing: false }) |
testDebounce方法被绑定在一个按钮上，demo最终的效果是 ： 1、按钮点击后控制台立马打印了debounce——19:39:00； 2、5秒内点击多次按钮，最终只打印一次debounce——19:39:05前，假设19:39:04完成了最后一次点击； 3、相对于最后一次点击的5秒后再点击一次，会重新打印debounce——19:39:09后； PS：lodash默认leading为false、trailing为true，那么最终的效果是在点击后等待5秒才会打印debounce，即延迟之前不执行函数，而是在延迟之后执行。 debounce 总结走起 当调用动作触发一段时间后，才会执行该动作，若在这段时间间隔内又调用此动作则将重新计算时间间隔。 简言之：结束时间点会随点击改变 综上所述，适用情况如下： throttle （1）对于键盘事件，当用户键入非常频繁，但我们又必须要在一定时间（阀值）内执行处理函数的时候。例如：一些网页游戏的键盘事件。 （2）对于鼠标移动和窗口滚动，鼠标的移动和窗口的滚动会带来大量的事件，但是在一段时间内又必须看到页面的效果。例如：对于可以拖动的div，如果使用debounce，那么div会在拖动停止后突然跳到目标位置；这时就需要使用throttle。 debounce （1）对于键盘事件，当用户输入比较频繁的时候，可以通过debounce合并键盘事件处理。例如：需要在用户输入完成时进行字符串校验。 （2）对于ajax请求的情况。例如：当页面下拉超过一定范围就通过ajax请求新的页面内容，这时候可以通过debounce合并ajax请求事件。 from:https://www.cnblogs.com/dreamsqin/p/11305028.html
View Details一、安装
|
1 |
cnpm i lodash -S |
二、方法一 1、引入
|
1 2 |
import _ from 'lodash' Vue.prototype._ = _ |
2、使用
|
1 |
this._.debounce(this.handleClick,1000,false) |
二、方法二 1、引入
|
1 |
let _ = require('lodash') |
2、使用
|
1 |
_.debounce(this.handleClick,1000,false) |
三、vue单文件组件中使用 里面分别有我自己写的debounce函数和lodash的debounce函数，效果一样！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<template> <div> <el-button @click="myDebounce">我的debounce</el-button> <el-button @click="_debounce">lodash的debounce</el-button> </div> </template> <script> import { debounce } from '@/utils/util' let _ = require('lodash') export default { methods: { handleClick1() { console.log(`真正执行的函数，次数比较少：handleClick1.....`) }, handleClick2() { console.log(`真正执行的函数，次数比较少：handleClick2.....`) }, myDebounce() { console.log(`myDebounce.....`) this.DB() }, _debounce() { console.log(`_debounce.....`) this._DB() } }, created() { this.DB = debounce(this.handleClick1, 1000, false) this._DB = this._.debounce(this.handleClick2,1000,false) } } </script> |
debounce测试.png 注意：以前我是在data选项里面定义DB:null，然后再methods里面初始化函数，但是需要判断‘如果有了就不赋函数，如果为空就赋’，发现比较麻烦；后来直接在created钩子里面定义，就很方便了！ 作者：斐鸽传书 链接：https://www.jianshu.com/p/907e8a0ee5d7 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
View Details