JavaScript 求大神解释下这段防抖函数代码，最好详细越好
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 求大神解释下这段防抖函数代码，最好详细越好相关的知识，希望对你有一定的参考价值。
重点问下78行的意义是什么？我去掉，直接调用method效果是一样的
而代码本身是当屏幕滚动时触发debounce中return的那个函数（不是debonuce，无论屏幕滚不滚debounce都会执行），self和args可以无视，后面是判断延时timer存不存在，存在就删除，删完创建一个新的，延时0.2s。执行的效果就会是当屏幕滚一下时会console出滚动条高度，但是在0.2s中连续滚动时同样只会触发一次，因为会不断调用return的函数，把前一个延时删除。 参考技术A 段防抖函数代码 参考技术B 改变this指向和传递参数
javaScript基本功之函数防抖与节流
1、函数节流与防抖
函数的节流与防抖是一种优化频繁调用时优化的方案。
比如canvas画笔时频繁获取位置点绘画会增大客服端CPU压力，那么就需要那控制频繁操作为一个范围内来优化而不影响绘画效果，
这样能让页面浏览更加顺畅，不会因为js的执行而发生卡顿。
函数节流是指一定时间内js方法只调用一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。
函数防抖:
比如搜索框停止输入后自动查询数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="text">
<script>
var oText = document.querySelector( "#text" );
function debunce( delay ){
var timer = null;
return function(){
var text = this.value;
clearTimeout( timer );
timer = setTimeout( function(){
console.log( "ajax-->" + text );
}, delay );
}
}
oText.onkeyup = debunce( 1000 );
</script>
</body>
</html>
函数防抖还可以使用在提交数据时限制频繁触发多次提交而实现一次提交。
函数节流:
比如缩放窗口时触发resize事件的防止频繁触发的控制调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="text"></div> <script> var oText = document.querySelector( "#text" ); function throttle(fn, delay){ var startDate, timer; return function(ev){ var currDate = +new Date(); clearTimeout( timer ); if( !startDate ){ startDate = currDate; fn(); }else{ if( currDate - startDate >= delay ){ startDate = currDate; fn(); }else{ timer = setTimeout( fn, 500 ); } } } } function fn(){ var d = new Date(); console.log( d ); oText.innerHTML = document.documentElement.clientWidth; } window.onresize = throttle( fn, 1000 ); </script> </body> </html>
以上的节流添加最后一次的定时触发，那么停止操作后会进行最后一次触发，只是这个触发会延迟0.5s,那么就可以防止最后一次停止后不触发而导致不能精确。
以上是关于JavaScript 求大神解释下这段防抖函数代码，最好详细越好的主要内容，如果未能解决你的问题，请参考以下文章
AS3 求大神优化下这段代码，这个代码里的if else太多了，但需要去判断关数在返回指定的数组，求大神简化！
关于js中 .map()的问题，希望大神可以帮忙解读下这段代码的实现过程