有谁做分销网站,化妆品网站的设计与实现,建设厅八大员报名网站,网络推广方案下拉管家xiala11目录 问题引入#xff1a;
定义
解决方案#xff1a;函数节流
一、案例举例
1.页面展示
2.search.wxml标签展示 3.search.js展示
4.结果展示 二、函数节流解决问题
1.函数
2.实例应用
三、函数防抖解决问题
1.函数
2.原理
3.应用场景
4.应用实例
总结 问题引入…目录 问题引入
定义
解决方案函数节流
一、案例举例
1.页面展示
2.search.wxml标签展示 3.search.js展示
4.结果展示 二、函数节流解决问题
1.函数
2.实例应用
三、函数防抖解决问题
1.函数
2.原理
3.应用场景
4.应用实例
总结 问题引入
在搜索框中程序短时间内大量触发某函数而导致的性能下降。
定义
节流: n 秒内只运行一次若在 n 秒内重复触发只有一次生效防抖: n 秒后在执行该事件若在 n 秒内被重复触发则重新计时
解决方案函数节流
函数节流: 频繁触发,但只在特定的时间内才执行一次代码函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码
一、案例举例
1.页面展示 2.search.wxml标签展示
input typetext bindinputhandleInputChange / 3.search.js展示
handleInputChange(event){console.log(event.detail.value)
}
4.结果展示 二、函数节流解决问题
1.函数
setTimeout(() {}, 300);
2.实例应用
//全局变量
let isSend false;
// input 输入框
handleInputChange(event) {console.log(event.detail.value)this.setData({searchContent: event.detail.value.trim()});// 函数节流 防抖if (isSend) {return}isSend truethis.getSearchList()setTimeout(async () {isSend false}, 300);},
//请求方法
async getSearchList() {let searchListData await request(/search, { keywords: this.data.searchContent, limit: 10 })this.setData({searchList: searchListData.result.songs})},
三、函数防抖解决问题
1.函数
debounce: function (func, wait) {return () {clearTimeout(timer);timer setTimeout(func, wait);};};
func:需要防抖的函数
wait:number类型setTimeout的时间参数2.原理
防抖的原理就是你尽管触发事件但是我一定在事件触发n秒无操作后才执行
3.应用场景
表单验证搜索框输入查询滚动条滚动按键提交
4.应用实例
function debounce(fn, interval) {let timer;let delay interval || 500; // 间隔的时间如果interval不传则默认1秒return function () {let that this;let args arguments; // 保存此处的arguments因为setTimeout是全局的arguments不是防抖函数需要的。if (timer) {clearTimeout(timer);}timer setTimeout(function () {fn.apply(that, args); // 用apply指向调用debounce的对象相当于this.fn(args);}, delay);};
}总结
函数节流与函数防抖节约计算机资源提升用户体验节流一般是用在必须执行这个动作但是不能够执行太频繁的情况下防抖一般是用来用户输入有操作时暂时不执行动作等待没有新操作时进行相应响应函数防抖与节流都可以解决频繁使用计算机资源的问题
