Javascript的防抖和节流方法怎么用
Javascript的防抖和节流方法怎么用
本篇内容主要讲解“Javascript的防抖和节流方法怎么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Javascript的防抖和节流方法怎么用”吧!
1. 什么是防抖
【解释】：防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
【图解】：
【作用】：
当用户频繁触发该事件的时候，确保只进行最后一次的请求操作，节约请求的资源
【实现输入框的防抖】：
vartimer=null//1.防抖动的timerfunctiondebounceSearch(keywords){//2.定义防抖的函数timer=setTimeout(function(){//发起JSONP请求getSuggestList(keywords)},500)}$('#ipt').on('keyup',function(){//3.在触发keyup事件时，立即清空timerclearTimeout(timer)//...省略其他代码debounceSearch(keywords)})
【实现建议框缓存】：
定义全局缓存对象
//缓存对象varcacheObj={}
将搜索结果保存到缓存对象中
//渲染建议列表functionrenderSuggestList(res){//...省略其他代码//将搜索的结果，添加到缓存对象中vark=$('#ipt').val().trim()cacheObj[k]=res}
优先从缓存中获取搜索建议
//监听文本框的keyup事件$('#ipt').on('keyup',function(){//...省略其他代码//优先从缓存中获取搜索建议if(cacheObj[keywords]){returnrenderSuggestList(cacheObj[keywords])}//获取搜索建议列表debounceSearch(keywords)})
2、什么是节流
【解释】：减少一段时间内事件的触发频率。也叫节流策略。
【图解】：
【应用】
鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；
【鼠标跟随案例】：
