iis发布网站页面出问题,怎么去推广一个app,极速网站建设多少钱,电子商务静态网站建设心得方法一#xff1a;采用Lodash工具库
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
#xff08;1#xff09;采用终端导入Lodash库
$ npm i -g npm
$ npm i --save lodash
#xff08;2#xff09;应用
示例#xff1a;搜索框输入防抖
在这个示例…方法一采用Lodash工具库
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
1采用终端导入Lodash库
$ npm i -g npm
$ npm i --save lodash
2应用
示例搜索框输入防抖
在这个示例中我们希望用户在输入框中停止输入 500 毫秒后才执行搜索操作避免频繁请求.
input typetext idsearch placeholderSearch...script srchttps://cdn.jsdelivr.net/npm/lodash4.17.21/lodash.min.js/script
script// 假设这是一个执行搜索操作的函数function performSearch(query) {console.log(Searching for:, query);// 这里可以发送 ajax 请求进行搜索}// 使用 lodash 的 debounce 函数const debouncedSearch _.debounce(function(event) {performSearch(event.target.value);}, 500); // 500ms 的防抖时间// 监听输入框的输入事件document.getElementById(search).addEventListener(input, debouncedSearch);
/script示例滚动事件节流
在这个示例中我们希望当用户滚动页面时每隔 1 秒才记录一次滚动事件避免频繁触发回调函数。
div styleheight: 2000px;Scroll down to see the effect/div
!-- 导入 throttle 函数--
script srchttps://cdn.jsdelivr.net/npm/lodash4.17.21/lodash.min.js/script
script// 这是一个处理滚动事件的函数function handleScroll() {console.log(Scroll event detected at:, new Date().toLocaleTimeString());}// 使用 lodash 的 throttle 函数每隔 1 秒最多触发一次const throttledScroll _.throttle(handleScroll, 1000);// 监听滚动事件window.addEventListener(scroll, throttledScroll);
/script解释 当用户滚动页面时throttledScroll 函数会在 1 秒内最多触发一次避免滚动时回调函数被频繁调用。这优化了页面滚动的性能特别是在回调函数较为复杂时。
示例结合 leading 和 trailing 选项
假设我们希望在用户第一次触发事件时立即执行函数并在停止触发 1 秒后再次执行。
input typetext idinput-field placeholderType something...script srchttps://cdn.jsdelivr.net/npm/lodash4.17.21/lodash.min.js/script
script// 假设这是一个处理输入的函数function handleInput(value) {console.log(Input value processed:, value);}// 使用 debounce 函数并配置 leading 和 trailing 选项const debouncedInput _.debounce(function(event) {handleInput(event.target.value);}, 1000, { leading: true, trailing: true });// 监听输入框的输入事件document.getElementById(input-field).addEventListener(input, debouncedInput);
/script方法二自定义防抖、节流函数
1在utils文件夹下创建lodash.ts文件里面定义防抖节流函数 // 防抖函数
export function debounce(fn: Function, delay: number) {let timer: ReturnTypetypeof setTimeout | null null;return function (this: any, ...args: any[]) {// 清除上一个定时器if (timer) {clearTimeout(timer);}// 设置新的定时器timer setTimeout(() {fn.apply(this, args); // 使用apply确保this和参数正确传递}, delay);};
}// 节流函数
export function throttle(fn: Function, delay: number) {let lastTime 0;return function (this: any, ...args: any[]) {const now Date.now();// 如果距离上次执行时间已超过指定时间间隔则执行函数if (now - lastTime delay) {lastTime now; // 更新上次执行时间fn.apply(this, args);}};
}
2应用
防抖
方式一
templatedivinput v-modelsearchText placeholder输入搜索内容 /button clickhandleSubmit提交/button/div
/templatescript langts setup
import { ref } from vue;
import { debounce } from /utils/debounce; // 引入自己写的防抖函数// 1. 声明响应式数据
const searchText refstring();// 2. 防抖函数延迟1000毫秒执行提交操作
const submitForm (val: string) {console.log(提交的搜索值:, val);// 在这里执行提交操作
};// 3. 使用防抖函数包装提交操作
const handleSubmit debounce(() {submitForm(searchText.value); // 使用当前输入的值执行提交操作
}, 1000); // 防抖延迟设置为1000毫秒/script方式二
templatedivinput v-modelsearchText placeholder输入搜索内容 /button clicksubmitForm(searchText)提交/button/div
/templatescript langts setup
import { ref } from vue;
import { debounce } from /utils/debounce; // 引入自己写的防抖函数// 1. 声明响应式数据
const searchText refstring();// 2. 定义提交表单操作
const submitForm debounce((val: string) {console.log(提交的搜索值:, val);// 在这里执行提交操作
}, 1000); // 防抖延迟设置为1000毫秒/script节流
templatediv scrollhandleScroll styleheight: 300px; overflow-y: scroll;!-- 模拟内容超出容器高度以启用滚动 --div styleheight: 1000px;滚动内容/div/div
/templatescript langts setup
import { throttle } from ./debounce; // 引入节流函数// 1. 定义滚动事件处理函数节流
const handleScroll throttle(() {console.log(滚动事件触发);// 在这里处理滚动事件例如加载更多内容
}, 200); // 每200毫秒只执行一次/scripttemplatediv scrollhandleScroll styleheight: 300px; overflow-y: scroll;!-- 模拟内容超出容器高度以启用滚动 --div styleheight: 1000px;滚动内容/div/div
/templatescript langts setup
import { throttle } from ./debounce; // 引入节流函数// 1. 定义滚动事件处理函数节流
const handleScroll throttle(() {console.log(滚动事件触发);// 在这里处理滚动事件例如加载更多内容
}, 200); // 每200毫秒只执行一次/script应用场景
防抖 (debounce):
手抖了。。。多点了好几次一定时间内只执行一次。年纪大了手抖
功能只有在用户停止触发事件一段时间后才会执行回调函数。应用场景输入框搜索、窗口大小调整resize、表单提交等。
节流 (throttle):
好比点了两次下拉刷新列表页面他不会马上直接执行两次是在你定义的一定时间间隔前提前先执行第一次在执行第二次
功能在指定的时间间隔内只执行一次函数。如果触发频繁函数执行会被限制在每个时间间隔内最多执行一次。应用场景滚动事件、鼠标移动事件、resize 事件等。
