函数防抖和函数节流

防抖和截流都是优化高频率执行的一种手段。

区别:防抖是将多次执行后采用最后一次执行,节流是将多次执行变成每隔一段时间执行。

 防抖(debounce) 高频发事件中,在足够的空闲时间内只执行一次,多次触发会把上一次延迟执行清空掉,重新开始,如果计时完毕,没有方法进来访问触发,则执行代码。

var timer=null;

function debounce(){

if(timer)clearTimeout(timer);

return function() {

timer = setTimeout(function(){console.log("防抖")}, 1000)}}

document.getElementById("sss").addEventListener("click",debounce);

节流(thorttle)高频发事件中,在一定时间内只能执行一次,稀释函数的执行频率。

var canRun=false;

function thorttle(){

if(canRun) return;

canRun=true;

setTimeout(function(){ console.log("节流"); canRun=false; }, 1000)}

document.getElementById("sss").addEventListener("click",thorttle);

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执...
    yuanjiex阅读 652评论 0 1
  • 一、概念 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。 旧款电视机的工作原理,就是一行行得扫描出...
    木子川页心阅读 540评论 1 1
  • 函数防抖: 任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。 debounce-函数防抖...
    Applet_18c1阅读 258评论 0 0
  • 概念 函数防抖和函数节流的目的都是降低回调执行频率,节约资源,控制函数的执行的次数 函数防抖: 主要应用在事件被...
    YS909090阅读 303评论 0 0
  • 参考链接:https://juejin.im/post/5a35ed25f265da431d3cc1b1我的理解:...
    小豆soybean阅读 266评论 0 0