小说网站系统怎么做,深圳做营销网站设计,页面设计稿,网站开发技术课程设计说明书你好同学#xff0c;我是沐爸#xff0c;欢迎点赞、收藏和关注#xff01;个人知乎 防抖在前端开发中可以说经常用到#xff0c;有诸多使用场景。接下来我们一起看下防抖的定义、防抖函数的实现、应用场景、lodash防抖函数以及防抖在框架中的使用。Let’s go
一、什么是防…你好同学我是沐爸欢迎点赞、收藏和关注个人知乎 防抖在前端开发中可以说经常用到有诸多使用场景。接下来我们一起看下防抖的定义、防抖函数的实现、应用场景、lodash防抖函数以及防抖在框架中的使用。Let’s go
一、什么是防抖
什么是防抖防抖技术确保函数在指定的时间间隔结束后才执行如果在该间隔内有多次调用则只会执行最后一次调用。通俗点讲以按钮点击为例设置频率为1s那么如果相邻两次的点击事件的时间间隔小于1s理论上你可以一直点下去点击要执行的函数永远不会触发如果你只点了一次或者两次点击的时间间隔大于等于1s那么函数就会执行。
二、函数实现
function debounce(fn, wait) {let timeout null;return function() {clearTimeout(timeout);timeout setTimeout(() {fn.apply(this, arguments);}, wait);};
}// 使用示例方式一
window.addEventListener(resize, debounce(function() {console.log(窗口大小改变);
}, 200));// 使用示例方式二
function onWindowResize() {console.log(窗口大小改变);
}
window.addEventListener(resize, debounce(onWindowResize, 200));三、应用场景 1.搜索框输入
当用户在搜索框中键入时通常希望在用户停止输入一定时间后再去请求搜索结果以减少请求次数。
function onSearchInput() {console.log(搜索词:, this.value);
}const searchInput document.querySelector(.search-input);
searchInput.addEventListener(input, debounce(onSearchInput, 300));2.窗口调整大小
在用户调整浏览器窗口大小时可能需要根据最终的尺寸执行一些操作如重新计算布局或重新加载资源。
// 假设 myChart 是一个 ECharts 实例
const myChart echarts.init(document.getElementById(myChart));// 对图表进行初始化操作如设置选项等
myChart.setOption(/* ... */);// 定义一个函数用于响应窗口大小变化
function onWindowResize() {myChart.resize(); // 调整图表尺寸以适应窗口大小
}// 使用防抖处理窗口调整大小事件
const debouncedResize debounce(onWindowResize, 200);// 监听窗口调整大小事件
window.addEventListener(resize, debouncedResize);3.表单验证
在用户填写表单时可能希望在用户完成输入后进行验证而不是每输入一个字符都进行验证。
function onFormInput() {// 执行表单验证逻辑console.log(输入内容验证);
}const formInput document.querySelector(.form-input);
formInput.addEventListener(input, debounce(onFormInput, 500));4.表单提交
防抖也经常会用于表单提交用以限制用户手误导致的重复提交。
// 搜索函数
function handleSubmit() {console.log(执行搜索操作);// 执行搜索的逻辑
}// 将防抖应用于点击事件
const debouncedSubmit debounce(handleSubmit, 300);// 给搜索按钮添加点击事件监听器
searchButton.addEventListener(click, debouncedSubmit);5.键盘事件处理
在处理键盘事件如连续按键时防抖可以确保在用户停止按键后执行操作如提交搜索查询。
function onKeyPress() {console.log(按键事件);
}document.addEventListener(keydown, debounce(onKeyPress, 100));6.文件预览
在选择文件后可能需要在用户停止选择文件一段时间后才加载预览以避免在文件选择过程中占用过多资源。
function onFileSelected() {console.log(文件选择完成);// 加载文件预览或处理文件
}const fileInput document.querySelector(.file-input);
fileInput.addEventListener(change, debounce(onFileSelected, 300));四、lodash防抖函数
Lodash 是一个流行的 JavaScript 实用工具库它提供了很多现成的函数式编程工具包括防抖debounce功能。Lodash 的 debounce 方法可以非常方便地实现函数的防抖。
import _ from lodash;function performSearch(query) {console.log(搜索:, query);// 执行搜索逻辑
}
const debouncedSearch _.debounce(performSearch, 300);const searchInput document.getElementById(search-input);
searchInput.addEventListener(input, (event) {debouncedSearch(event.target.value);
});五、防抖在框架中的使用 Vue 2 中的防抖使用
在Vue 2中你可以使用debounce函数结合watch属性来实现防抖
import _ from lodash;export default {data() {return {searchQuery: }},watch: {// 使用防抖函数包装 watch 属性searchQuery: _.debounce(function (newValue) {console.log(搜索查询更新:, newValue);// 执行搜索逻辑}, 300)},methods: {// 其他方法...}
}Vue 3 中的防抖使用
Vue 3 引入了Composition API提供了更多的灵活性。对Vu2的例子进行改写
import _ from lodash;
import { reactive, watch } from vue;const state reactive({searchQuery:
});const debouncedSearch debounce((newValue) {console.log(搜索查询更新:, newValue);// 执行搜索逻辑
}, 300);watch(() state.searchQuery, (newValue, oldValue) {debouncedSearch(newValue);
});React 中防抖的使用
1.函数组件使用防抖函数假设我们有一个搜索框我们想要在用户停止输入300毫秒后才执行搜索操作
import React, { useState, useCallback } from react;
import _ from lodash; // 引入Lodash库const SearchComponent () {const [searchTerm, setSearchTerm] useState();// 使用 useCallback 钩子来记忆化防抖函数const debouncedSearch useCallback(_.debounce((term) {console.log(搜索:, term);// 执行搜索逻辑}, 300),[]);const handleInputChange (event) {// 当输入改变时更新状态并触发防抖函数setSearchTerm(event.target.value);debouncedSearch(event.target.value);};return (inputtypetextvalue{searchTerm}onChange{handleInputChange}placeholder输入搜索内容/);
};export default SearchComponent;2.类组件使用防抖函数在类组件中你可以在componentDidMount生命周期方法中设置事件监听器并在componentWillUnmount中清除它们
import React, { Component } from react;
import _ from lodash;class SearchComponent extends Component {constructor(props) {super(props);this.state {searchTerm: ,};this.debouncedSearch _.debounce(this.handleSearch, 300);}handleSearch (term) {console.log(搜索:, term);// 执行搜索逻辑};handleInputChange (event) {const term event.target.value;this.setState({ searchTerm: term }, () {this.debouncedSearch(term);});};componentDidMount() {// 如果需要绑定事件可以在此处进行}componentWillUnmount() {// 清除防抖函数的定时器this.debouncedSearch.cancel();}render() {const { searchTerm } this.state;return (inputtypetextvalue{searchTerm}onChange{this.handleInputChange}placeholder输入搜索内容/);}
}export default SearchComponent;希望今天的分享对你有所帮助下期再见
