js函数的节流和防抖

用户浏览页面时会不可避免的触发一些高频度触发事件（例如页面 scroll ，屏幕
resize，监听用户输入等），这些事件会频繁触发浏览器的重拍（reflow）和重绘（repaint）这会严重耗费浏览器性能，造成页面
卡顿。
举几个例子：比如说我们在滚动事件中要做一个复杂的计算，或者做一个按钮的防二次点击操作的需求，这些需求都会在频繁的事件
回调中做复杂计算，很有可能导致页面卡顿，这时候我们可以将多次计算合并为一次计算，只在一个精确点做操作。这些事可以利用
函数的防抖来实现

函数的防抖，就是可以让这个函数每次触发的时间间隔小于wait，防抖的情况下就是假设用户一直触发我这个函数，这个函数只会调用一次，也就是在最后一次来进行调用，下面是一个简单的防抖函数代码实现

//func是你要绑定防抖操作的函数，wait是你想要这个函数多少ms之内不能连续触发，也就是假如你设置了100ms后触发，那这个函数在100ms之内如果又执行了就不会触发，直到超过100ms后这个函数才会执行 ???function debounce(func, wait) { ???????// 定时器变量 ???????var timer ???????return function() { ???????????// 每次触发绑定的函数之前先清除定时器 ???????????clearTimeout(timer) ???????????// 指定 xx ms 后触发 ???????????timer = setTimeout(func, wait) ???????} ???} ????????// 实际想绑定在 scroll 事件上的 handler ???function realFunc(){ ???????console.log("success ") ???} ????????// 采用防抖动 ???window.addEventListener(‘scroll‘,debounce(realFunc,500))

假如说有现在这样一个需求，我们需要在滚动的时候实时的console.log(0)，你懂得，在一次滚动过程中函数的执行频率特别快
，如果这个函数有更为复杂的方法，比如操作dom或者其他交互，会严重影响性能。这个时候我们就需要做一个节流的操作来减
少这个函数的调用频率

函数节流，就是将多次执行变成每隔一段固定的时间执行一次，会大大提高性能，比如我们可以设置一个高频率事件每隔100ms执行一次，这样性能就会得到很大的优化，下面是一个简单的节流函数的代码实现

//mustRunTime就是你想要设置的多少ms执行一次 ???function throttle(func, wait, mustRunTime) { ???????var timer, ???????????startTime = new Date(); ????????????return function() { ???????????var _this = this, ???????????????args = arguments, ???????????????curTime = new Date(); ????????????????clearTimeout(timer); ???????????// 如果达到了规定的触发时间间隔，就触发这个func ???????????if(curTime - startTime >= mustRunTime){ ???????????????func.apply(_this,args); ???????????????startTime = curTime; ???????????// 没达到触发间隔，重新设定定时器 ???????????}else{ ???????????????timer = setTimeout(func, wait); ???????????} ???????}; ???}; ???function realFunc(){ ???????console.log("success"); ???} ???// 采用了节流函数 ???window.addEventListener(‘scroll‘,throttle(realFunc,500,1000));

以上是本人对js函数节流和防抖的一些理解，希望对你能有所帮助~~~

js函数的节流和防抖

原文地址：https://www.cnblogs.com/bai1218/p/9986934.html