函数节流

最新推荐文章于 2022-08-07 21:53:29 发布

Nestor_

最新推荐文章于 2022-08-07 21:53:29 发布

阅读量206

点赞数

分类专栏：知识总结文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_43122585/article/details/97105012

版权

知识总结专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种函数节流的技术实现，通过使用定时器来避免在短时间内频繁触发同一函数导致的性能问题。具体做法是在函数首次被调用时设定一个定时器，如果在设定的时间间隔内该函数再次被调用，则清除之前的定时器并重新计时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本思想
某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行

var processor = {
    timeoutId: null,
    performProcessing: function () {
    	// 内容滚动时发生的动作
    },
    process: function () {
        clearTimeout(this.timeoutId);
        this.timeoutId = setTimeout(function () {
            processor.performProcessing();
        }, 100);
    }
};

页面滚动执行process()，等待100毫秒执行当前滚动事件，如果100毫秒内再次发生滚动事件则删除上次滚动生成的定时任务，而重新生成一个新的定时任务再等待100毫秒

$(".wrap").scroll(function() {
	// 函数节流
	processor.process();
});