Lodash库中的debounce
方法用于限制某个函数在短时间内被频繁调用的次数,通过在特定时间内延迟函数的执行。这在处理诸如窗口大小调整、滚动、键盘事件等有高频触发行为的场合非常有用。
在debounce
方法中,maxWait
选项是一个非常重要的配置,它定义了函数被延迟执行的最大等待时间。即使在此期间持续触发事件,函数也会在达到maxWait
时间后被强制执行一次。
例子说明:
假设我们有一个搜索框,当用户输入文字时,我们希望能实时通过API获取搜索建议。为了减少API请求的次数,我们使用debounce
方法来延迟请求的发送。如果设置了maxWait
,即使用户持续快速输入文字,每隔maxWait
设定的时间,函数也会至少执行一次,确保用户不会因为频繁输入而延迟得到反馈。
javascript// 引入lodash import _ from 'lodash'; function fetchSuggestions(query) { // 假设这里调用API获取搜索建议 console.log(`Fetching data for: ${query}`); } // 创建debounced函数 const debouncedFetchSuggestions = _.debounce(fetchSuggestions, 200, { 'maxWait': 1000 }); // 模拟用户输入 debouncedFetchSuggestions('a'); setTimeout(() => debouncedFetchSuggestions('ab'), 100); setTimeout(() => debouncedFetchSuggestions('abc'), 300); setTimeout(() => debouncedFetchSuggestions('abcd'), 600); setTimeout(() => debouncedFetchSuggestions('abcde'), 900); setTimeout(() => debouncedFetchSuggestions('abcdef'), 1200); // 输出将展示如何在用户快速输入时,每1000毫秒至少执行一次API调用
在这个例子中,尽管用户在短时间内多次改变输入,debounce设置的200毫秒延迟会尝试合并这些调用。然而,通过设置maxWait
为1000毫秒,无论事件延迟多少次,每1000毫秒函数至少被执行一次,这样确保了用户能够及时获得反馈,同时API不会被过度调用。
2024年6月29日 12:07 回复