liguigong
4ea873c1bd
- 添加 fittingRoom 存储模块，用于管理试衣间状态和数据 - 实现试衣间页面布局和基础功能，包括轮播图、标签页、衣服网格等组件 - 开发选择模特和上传衣服功能 - 优化页面样式和交互
111 lines
4.0 KiB
JavaScript
111 lines
4.0 KiB
JavaScript
/**
|
|
* 启动一个微任务。
|
|
*
|
|
* 该函数旨在兼容不同环境下的微任务调度。微任务是一种在主任务（如事件循环中的回调）之后，但在下一次渲染之前执行的JavaScript任务。
|
|
* 它们对于异步编程和性能优化非常重要。此函数尝试使用三种不同的方法来调度微任务，取决于环境的支持情况。
|
|
*
|
|
* @param {Function} callback - 待执行的微任务回调函数。
|
|
*/
|
|
export function startMicroTask(callback) {
|
|
// 如果队列微任务是可用的，直接使用队列微任务的方法来调度回调。
|
|
if (typeof queueMicrotask === 'function') {
|
|
queueMicrotask(callback)
|
|
} else if (typeof MutationObserver === 'function') {
|
|
// 如果MutationObserver可用，使用它来创建一个微任务。
|
|
// 这是一种旧的兼容性方法，因为MutationObserver在较早的浏览器版本中就已经支持。
|
|
const node = document.createElement('div')
|
|
const observer = new MutationObserver(callback)
|
|
observer.observe(node, { childList: true })
|
|
node.textContent = 'xfjpeter'
|
|
} else {
|
|
// 如果以上两种方法都不可用，退回到使用setTimeout来模拟微任务。
|
|
// 这是最后的选择，因为setTimeout不是真正的微任务，但它可以在不支持微任务的环境中提供类似的功能。
|
|
setTimeout(callback, 0)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 函数节流器。
|
|
* 通过限制函数调用的频率，防止在高频率事件（如窗口滚动或鼠标移动）中过多调用给定的函数，从而优化性能。
|
|
*
|
|
* @param {Function} fn 要节流的函数。
|
|
* @param {number} delay 延迟的毫秒数，在这段时间内只能调用一次给定的函数。
|
|
* @returns {Function} 返回一个新的节流函数，它将控制原始函数的调用频率。
|
|
*/
|
|
/**
|
|
* 函数节流器
|
|
* @param {Function} fn 要节流的函数
|
|
* @param {number} delay 延迟的毫秒数
|
|
* @returns {Function} 返回节流后的函数
|
|
*/
|
|
export function throttle(fn, delay) {
|
|
// 用于存储定时器ID
|
|
let timeoutId
|
|
// 用于记录上一次函数执行的时间
|
|
let lastExecuted = 0
|
|
|
|
// 返回一个节流函数
|
|
return function () {
|
|
// 保存当前上下文和参数
|
|
const context = this
|
|
const args = arguments
|
|
// 获取当前时间
|
|
const now = Date.now()
|
|
// 计算剩余时间
|
|
const remaining = delay - (now - lastExecuted)
|
|
|
|
// 实际执行函数的内部函数
|
|
function execute() {
|
|
lastExecuted = now
|
|
// 在当前上下文中调用原始函数，并传入参数
|
|
fn.apply(context, args)
|
|
}
|
|
|
|
// 如果剩余时间小于等于0，表示可以执行函数
|
|
if (remaining <= 0) {
|
|
// 如果存在定时器，则清除定时器
|
|
if (timeoutId) {
|
|
clearTimeout(timeoutId)
|
|
timeoutId = null
|
|
}
|
|
// 执行函数
|
|
execute()
|
|
} else {
|
|
// 如果不存在定时器，则设置定时器
|
|
if (!timeoutId) {
|
|
timeoutId = setTimeout(() => {
|
|
timeoutId = null
|
|
// 执行函数
|
|
execute()
|
|
}, remaining)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 函数防抖动封装。
|
|
* 函数防抖（debounce）是指在事件被触发n秒后，才执行回调，如果在这n秒内事件又被触发，则重新计时。
|
|
* 主要用于限制函数调用的频率，常用于输入事件处理函数（如输入框的keyup事件）和窗口大小调整事件等。
|
|
*
|
|
* @param {Function} fn 需要被延迟执行的函数。
|
|
* @param {number} delay 延迟执行的时间，单位为毫秒。
|
|
* @returns {Function} 返回一个经过防抖动处理的函数。
|
|
*/
|
|
export function debounce(fn, delay) {
|
|
// 用于存储定时器的变量
|
|
let timer = null
|
|
|
|
// 返回一个封装函数
|
|
return function () {
|
|
// 如果定时器存在，则清除之前的定时器
|
|
if (timer) clearTimeout(timer)
|
|
|
|
// 设置新的定时器，延迟执行原函数
|
|
timer = setTimeout(() => {
|
|
// 使用apply确保函数在正确的上下文中执行，并传递所有参数
|
|
fn.apply(this, arguments)
|
|
}, delay)
|
|
}
|
|
}
|