节流函数是 web 前端开发中经常用到的一个开发技巧, 在 input 实时搜索, 滚动事件等, 为了避免过多消耗性能, 我们都会使用节流函数. 在《JavaScript 高级程序设计》一书中有这样的一个例子:
- function throttle (method, context) {
- clearTimeout((method.tId))
- method.tId = setTimeout(function () {
- method.call(context)
- }, 100)
- }
- function resizeDiv () {
- var div = document.getElementById('myDiv')
- div.style.height = div.offsetWidth + 'px'
- }
- Windows.onresize = function () {
- throttle(resizeDiv)
- }
前端全栈学习交流圈: 866109386, 面向 1-3 经验年前端开发人员, 帮助突破技术瓶颈, 提升思维能力, 群内有大量 PDF 可供自取, 更有干货实战项目视频进群免费领取.
这个就是很典型的函数节流的应用, 不多解释, 本文通过 vue 的自定义指令封装类似的方法.
- <template>
- <div>
- <input
- type="text"
- v-model="text"
- v-debounce="search"
- >
- </div>
- </template>
- <script>
- export default {
- name: 'debounce',
- data () {
- return {
- msg: 'Welcome to Your vue.js App',
- text: '',
- count: 1
- }
- },
- directives: {
- debounce: {
- inserted: function (el, binding) {
- let timer
- el.addEventListener('keyup', () => {
- if (timer) {
- clearTimeout(timer)
- }
- timer = setTimeout(() => {
- binding.value()
- }, 300)
- })
- }
- }
- },
- methods: {
- search () {
- // 实际要进行的操作 axios.get('') 之类的
- this.count++
- console.log('count is:' + this.count)
- }
- }
- }
- </script>
前端全栈学习交流圈: 866109386, 面向 1-3 经验年前端开发人员, 帮助突破技术瓶颈, 提升思维能力, 群内有大量 PDF 可供自取, 更有干货实战项目视频进群免费领取.
以上代码实现了一个实时搜索类的函数节流, 通过 vue 自定义指令 v-debounce 实现. 原本, 如果我们想做一个实施搜索, 那么会直接用 @keyup=search, 这样就会非常耗性能, 键盘敲一下, 就会调用一次 search 事件, 如果是 Ajax 请求, 那么会非常不友好, 所以通过 v-debounce, 则可以在键盘连续敲击的时候组织运行, 停留 300 毫秒才执行.
通过 vue 的自定义指令, 还可以将其挂载在全局, 那样就能全局通过 v-debounce 调用了. 这个比传统方法简单很多, 不需要 call,apply 之类的.
关键点: vue 的自定义指令传递的参数 binding 如果是一个函数, 则通过 binding.value() 来执行, 通过上述示例, 还可以传递比如事件, 绑定对象之类的, 上例绑定的是 el, keyup 事件, 这些也可以通过 binding 传递, 通过 vue 的自定义指令, 可以简化很多重复代码, 并且逻辑更加清晰
来源: http://www.jianshu.com/p/33b34ea45fce