手写JavaScript防抖函数代码解析

资源摘要信息:"手写防抖函数" 知识点: 防抖函数是前端JavaScript开发中常用的一种技术手段，主要用于优化高频事件触发的场景，例如窗口的resize、scroll、输入框的input事件等。它的核心思想是在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。这样可以大大减少事件的触发频率，从而节省资源，提高性能。 防抖函数的实现思路主要有两种：立即执行和非立即执行。 1. 立即执行：在指定的时间间隔内，无论事件触发了多少次，函数只会执行一次。在首次触发事件时就立即执行函数，之后在规定的时间间隔内，即使再次触发事件也不会执行函数，直到过了这段时间后，再次触发事件才会执行。 实现代码示例： ```javascript function debounce(func, wait, immediate) { let timeout; return function() { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { var callNow = !timeout; timeout = setTimeout(() => { timeout = null; }, wait); if (callNow) func.apply(context, args); } else { timeout = setTimeout(function() { func.apply(context, args); }, wait); } } }; ``` 2. 非立即执行：在指定的时间间隔内，无论事件触发了多少次，函数都不会执行。只有当事件停止触发后，经过指定的时间间隔，函数才会执行。也就是说，最后一次触发事件之后，要等待一定时间后，才能执行函数。 实现代码示例： ```javascript function debounce(func, wait, immediate) { let timeout; return function() { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); timeout = setTimeout(function() { func.apply(context, args); }, wait); } }; ``` 在实际应用中，我们通常根据实际需求选择合适的实现方式。比如在搜索框输入时，我们可能希望用户停止输入后才开始搜索，这时我们就会用到非立即执行的防抖函数。 在防抖函数中，wait参数表示防抖时间，即在该时间内不希望函数被执行；immediate参数表示是否立即执行函数。当immediate为true时，表示立即执行函数，否则表示非立即执行。 此外，防抖函数在一些库中已经被实现，例如lodash就提供了debounce函数供开发者使用。 例如，在lodash中的debounce使用方法如下： ```javascript // 引入lodash的debounce函数 var _ = require('lodash'); // 假设有一个搜索框 var searchInput = document.getElementById('search-input'); // 创建防抖函数 var debounceSearch = _.debounce(function(e) { console.log('搜索内容：', e.target.value); }, 300); // 给搜索框绑定input事件，当输入时触发debounceSearch函数 searchInput.addEventListener('input', debounceSearch); ``` 需要注意的是，防抖函数虽然能提高性能，但可能会导致用户体验上的延迟。因此，在实际应用中要根据业务场景合理地选择防抖时间的长短，并且对于某些关键的用户操作，可能需要考虑防抖的负面效应，避免影响到用户的操作流程。