防抖和节流详解

最新推荐文章于 2024-08-21 15:43:48 发布

CoolBoy辉

最新推荐文章于 2024-08-21 15:43:48 发布

阅读量141

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/lh134241/article/details/117257504

版权

本文详细介绍了防抖(debounce)和节流(throttle)的概念。防抖技术确保在短时间内大量触发同一事件时，只会执行一次函数。而节流则是限制函数在连续触发时的执行频率，达到稀释执行频率的效果。文章分别阐述了防抖和节流的工作原理及应用场景。

摘要由CSDN通过智能技术生成

防抖(debounce)

基于上述场景，首先提出第一种思路：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：

如果在200ms内没有再次触发事件，那么就执行函数
如果在200ms内再次触发事件，那么当前的计时取消，重新开始计时

效果：如果短时间内大量触发同一事件，只会执行一次函数。

    // 非立即执行版
        function debounce(func, wait) {
   
            let timeout;
            console.log(timeout);
            return function () {
   
                console.log(timeout);
                console.log(2);
                let context = this;
                // console.log(context);
                let args = argum