防抖与节流
防抖
防抖：多次触发某个函数，以最后一次函数的执行为准。
也就是说给定了一个时间n，如果在n毫秒内重复执行某个函数那么将不会执行，如果n毫秒内不再触发这个函数，那么将执行该函数。表现的效果是如果一直触发函数，那么只有最后一次才会执行。
简单实现:
function debounce(func, wait) {
var timeout;
return function () {
var context = this;
var args = arguments;
clearTimeout(timeout)
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}简单使用:
var fn = debounce(function (){
console.log("函数执行了");
},500);
fn();// 第一次 并不会执行
fn();// 第二次 并不会执行
fn();// 第三次 由于500毫秒后没有再次执行 所以会在500毫秒后打印"函数执行了"防抖适用场景：多次重复的操作以最后一个为准的。就比如列表页有一个查询按钮，往往我们多次查询的结果都是以最后一次的结果为准，这里就可以用防抖。
节流
节流：多次触发某个函数，一段时间内只执行一次。
也就是说给定了一个时间n，如果在n毫秒内该函数多次调用那么会忽略这些调用，等n毫秒后会执行该函数。表现的效果是如果一直触发函数，那么每隔n毫秒就会执行一次函数。
简单实现:
function throttle(func, wait) {
var timeout = null;
return function() {
var context = this;
var args = arguments;
if (!timeout) {
timeout = setTimeout(function(){
timeout = null;
func.apply(context, args)
}, wait)
}
}
}节流适用场景：将密集型操作，转换为相对松散型的操作,以减小计算量。就比如onmousemove和onresize事件的处理等。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-04-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
