函数节流

最新推荐文章于 2025-06-12 17:10:21 发布

原创最新推荐文章于 2025-06-12 17:10:21 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#函数节流

原生js 专栏收录该内容

165 篇文章

订阅专栏

本文介绍了函数节流技术，一种防止因频繁触发事件导致浏览器崩溃的解决方案。通过使用定时器来限制函数执行频率，确保了操作DOM的安全性，并提供了一个具体的实现示例。

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

函数节流
函数节流是为了解决有时候连续触发某个事件或者连续滚动而频繁的操作DOM以至于浏览器可能奔溃的问题。
为了绕开这个问题，你可以使用定时器对函数进行节流。
函数节流的基本思想是：某些代码不可以在没有间断的情况下连续重复执行。
该模式的基本形式：

var processor = {
	timeoutId: null,
	performProcessing: function(){
		//实际执行的代码
	},
	//初始处理调用的方法
	process: function(){
		clearTimeout(this.timeoutId);
		var that = this;
		this.timeoutId = function(){
			that.performProcessing();
		}
	}
}
//调用process
processor.process();

下面看个示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数节流2</title>
</head>
<body>
    <div id='root' style='height:100px;background:red;'>
       root
    </div>
    <script>
        function throttle(method,context){
            clearTimeout(method.tId);
            method.tId = setTimeout(function(){
                method.call(context);
            },100)
        }

        function resizeDiv(){
            var root = document.getElementById('root');
            root.style.height = root.offsetWidth + 'px';
        }
        window.onresize = function(){
            throttle(resizeDiv);
        }
    </script>
</body>
</html>