Javascript函数节流 —— How To Use Throttle

为限制输入框change事件疯狂发送查询请求，此时我们就需要用一个节流函数来优化一下性能了。

大致思路：设置一个定时器，在指定时间间隔内运行代码时重置定时器，直到函数请求停止，函数才会在限定时间之后才会正式执行。

实际项目中，将节流函数挂载到vue原型上，方便调用，例 main.js 中：

// 写一个节流函数
Vue.prototype.$throttle = (method) => {clearTimeout(method.tId)method.tId = setTimeout(function() {method()}, 500)
}

当某个页面需要用到它时，例 area-select.vue 中：

filterMethod(key) {this.searchValue = keythis.$throttle(this.listMerIndex)
},
listMerIndex() {this.areas = nullthis.searchValue = this.searchValue.trim()if (!this.searchValue) {return false}let data = {merRole: 5,realName: this.searchValue}this.queryCancel && this.queryCancel()this.$apis.listMerIndex(data, this, 'queryCancel').then((res) => {this.areas = res.data}).catch((error) => {this.$message({showClose: true,type: 'error',message: error.message})})
}

参考链接：js函数节流

Javascript函数节流 —— How To Use Throttle相关推荐

javascript函数节流、防抖及使用场景
什么是函数节流函数节流就是指定时间间隔内只执行一次任务,减少消耗,节省开支.比如水电站是用大坝来控制水的流量,达到细水长流,持续发电的作用.还比如早上客流高峰,地铁站会限制人流,运完一批人再放另一批 ...
javascript 函数节流 throttle 解决函数被频繁调用、浏览器卡顿的问题
* 使用setTimeout index.html <html> <head><meta charset="UTF-8"><title&g ...
JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例
概念函数防抖(debounce): 事件响应函数在一段时间后才会执行,如果在这段时间内再次调用,则重新计算执行时间:当预定时间内没有再次调用该函数,则执行响应逻辑. 函数节流(throttle): ...
JavaScript 函数节流 throttle 和防抖 debounce
今天和别人聊到JavaScript函数的节流和防抖,发现自己对这两个的区别很是模糊,遂小小实践一下,在此记录,希望对需要的人有所帮助. 节流 - 频繁操作,间隔一定时间去做一件事举例说明:假定时间间 ...
JavaScript函数节流和函数防抖
1.为什么需要函数防抖和函数节流? 在浏览器中某些计算和处理要比其他的昂贵很多.例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间.连续尝试进行过多的DOM操作可能会导致浏览器挂起,甚至崩溃 ...
JavaScript函数节流
一.前言相对于函数防抖来说,函数节流的应用场景和频次更大一些.当然,如果想复习函数防抖,请点击<函数防抖>.废话不多,上正题: 二.什么是函数节流我们设想一个进地铁站过闸机的场景:每位 ...
JavaScript函数节流和函数防抖之间的区别
函数防抖所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. let box = document.getElementById('bo ...
JavaScript函数节流锁
0. 实现步骤在函数外部设置锁的初始状态: 需要加锁的函数内部,判断锁状态: 需要加锁的函数内部,关锁: 需要加锁的函数内部,延时器开锁: 1. 实现代码实现代码如下所示: var oBtn = ...
函数去抖（debounce）函数节流（throttle）总结
1. 什么是函数去抖 & 函数节流 debounce使用场景 throttle使用场景 2. 实现方法&应用 a. 简单实现 debounce throttle b. 附:Lodash ...

Javascript函数节流 —— How To Use Throttle

Javascript函数节流 —— How To Use Throttle相关推荐

最新文章

热门文章