防抖和节流简单易懂

月苏西

于 2022-02-13 15:48:56 发布

阅读量629

点赞数

分类专栏：面试题 JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_53150999/article/details/122909342

版权

面试题同时被 2 个专栏收录

8 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

本文深入探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，这两种技术常用于优化高频率触发的事件处理，例如输入框的输入事件、窗口的滚动事件。防抖通过设置定时器确保在设定的时间间隔后才执行，从而避免频繁执行。节流则控制执行次数，确保在特定时间内只执行一次。文章提供了具体的代码示例和封装方法，帮助开发者理解和应用这两种优化策略。

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

防抖:通过setTimeout 的方式，在一定时间间隔内，将多次触发变为一次触发

用户触发事件过于频繁，只执行最后一次

// 1.先获取dom节点
	var ipt = document.getElementById("input")
	// 2.定义一个清空定时器的变量
	var t = null
	// 3.触发事件
	ipt.oninput = function () {
		// 4.判断有没有t
		if (t !== null) {
			// 5.如过有就清除定时器
			clearTimeout(t)
		}
		// 6.如果没有t就把定时器赋值给t
		t = setTimeout(() => {
			console.log(this.value);
		}, 1000)
	}

这样就实现了，在一秒的间隔内，多次点击就会清除定时器，间隔超出一秒后就会执行定时器

封装一下：

// 1.先获取dom节点
	var ipt = document.getElementById("input")

	ipt.oninput = debounce(function () {
		console.log(this.value);
	}, 1000)

	// 封装一个防抖
	function debounce(fn, time) {
		var t = null
		return function () {
			if (t !== null) {
				clearTimeout(t)
			}
			t = setTimeout(() => {
				// 需要使用call改变this指向，不然this指向window
				fn.call(this)
			}, time)
		}
	}

节流：控制执行次数

控制高频事件的执行次数

  // 节流
        window.onscroll = throttle(function () {
            console.log("1");
        }, 500)
        function throttle(fn, time) {
            let flag = true;
            return function () {
                if (flag) {
                    setTimeout(() => {
                        fn()
                        // 每次定时器执行之后都把flag改为true
                        flag = true
                    }, time);
                }
                flag = false
            }
        }