处理繁重操作

最新推荐文章于 2022-07-01 13:16:49 发布

转载最新推荐文章于 2022-07-01 13:16:49 发布 · 126 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/WeiRuifeng/p/4733786.html

本文介绍了一种名为防抖的技巧，通过使用debounce函数，可以有效避免在频繁触发事件（如输入统计或滚动事件）时进行不必要的连续处理，从而提高应用性能。通过设置延迟时间和是否立即执行的参数，debounce函数能够智能地控制事件处理的频率。

在一些动态的操作中，我们没有必要不间断地调用某函数去完成一些功能，比如在输入时统计字数，我们没有必要没输入一次变统计一次，而是可以隔一段时间去统计一次，又比如scroll滚动事件，如果我们只是需要知道滚动的距离，没有必要去实时的监听scroll事件，可以隔一段时间监听一次。

在这里向大家介绍一个函数，可以解决这个问题。代码如下：

 1 // 返回一个函数，如果它被不间断地调用，它将不会得到执行。
 2 //该函数在停止调用 N 毫秒后，再次调用它才会得到执行。
 3 //如果有传递 ‘immediate’ 参数，会马上将函数安排到执行队列中，而不会延迟。
 4 function debounce(func, wait, immediate) {
 5     var timeout;
 6     return function() {
 7         var context = this, args = arguments;
 8         var later = function() {
 9             timeout = null;
10             if (!immediate){
11                 func.apply(context, args);
12             } 
13         }; 
14         var callNow = immediate && !timeout;
15         clearTimeout(timeout);
16         timeout = setTimeout(later, wait);
17         if (callNow) {
18             func.apply(context, args);
19         }
20     };
21 };
22 // 用法
23 var myEfficientFn = debounce(function() {
24 // 所有繁重的操作
25    console.log(123);
26 }, 250);
27 
28 window.addEventListener('scroll', myEfficientFn);

其中，myEfficientFn函数里写监听scroll的函数

转载于:https://www.cnblogs.com/WeiRuifeng/p/4733786.html