函数节流: 英文 throttle 有节流阀的意思。大致意思也是 节约触发的频率
那么,函数节流,真正的含义是:单位时间n秒内,第一次触发函数并执行,以后 n秒内不管触发多少次,都不执行。直到下一个单位时间n秒,第一次触发函数并执行,这个n秒内不管函数多少次都不执行。
用处:多用于页面scroll滚动,或者窗口resize,或者防止按钮重复点击等情况
其实如果只根据 控制函数触发的频率是不好区分这两个概念的。我认为两个函数都能达到防止重复触发的功能。但是函数防抖是 n秒后延迟执行;而函数节流是立马执行,n秒后再立马执行。
1,页面新建,书写一下代码:
/*函数节流*/ function throttle(fn, interval) { var enterTime = 0;//触发的时间 var gapTime = interval || 300 ;//间隔时间,如果interval不传,则默认300ms return function() { var context = this; var backTime = new Date();//第一次函数return即触发的时间 if (backTime - enterTime > gapTime) { fn.call(context,arguments); enterTime = backTime;//赋值给第一次触发的时间,这样就保存了第二次触发的时间 } }; } /*函数防抖*/ function debounce(fn, interval) { var timer; var gapTime = interval || 1000;//间隔时间,如果interval不传,则默认1000ms return function() { clearTimeout(timer); var context = this; var args = arguments;//保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。 timer = setTimeout(function() { fn.call(context,args); }, gapTime); }; } export default { throttle, debounce };
页面调用:
import tool from "../../until/tool.js"; Page({ data:{ win_scrollTop:0 }, //节流 onPageScroll: tool.throttle(function(msg){ this.setData({ win_scrollTop: msg[0].scrollTop }); }), //防抖 gotoUnlock: tool.debounce(function() { this.saveUserInfo(); }), saveUserInfo:function(){ console.log(111) } })