Browse Source

优化筛选功能:添加防抖机制和状态一致性检查

pull/12/head
徐飞洋 2 months ago
parent
commit
608c3390ba
  1. 85
      pages/index/index.js
  2. 13
      utils/api.js

85
pages/index/index.js

@ -111,6 +111,9 @@ Page({
// 防抖定时器 // 防抖定时器
searchDebounceTimer: null, searchDebounceTimer: null,
scrollDebounceTimer: null, scrollDebounceTimer: null,
filterDebounceTimer: null,
// 请求任务管理
currentRequestTask: null,
isRefreshing: false, isRefreshing: false,
isLoading: true, isLoading: true,
@ -436,6 +439,11 @@ Page({
return return
} }
// 保存当前筛选条件,用于后续验证一致性
const currentCategory = this.data.selectedCategory;
const currentKeyword = this.data.searchKeyword;
const currentRegion = this.data.selectedRegion;
this.setData({ this.setData({
isRefreshing: true, isRefreshing: true,
page: 1, page: 1,
@ -446,11 +454,14 @@ Page({
// 清除缓存以确保获取最新数据 // 清除缓存以确保获取最新数据
categoryQueryCache: {}, categoryQueryCache: {},
lastDataTimestamp: 0, lastDataTimestamp: 0,
// 保存当前筛选条件,用于验证请求结果
refreshCategory: currentCategory,
refreshKeyword: currentKeyword,
refreshRegion: currentRegion
}) })
const timestamp = new Date().getTime(); const timestamp = new Date().getTime();
const currentCategory = this.data.selectedCategory === '全部' ? '' : this.data.selectedCategory; const categoryParam = currentCategory === '全部' ? '' : currentCategory;
const currentKeyword = this.data.searchKeyword;
const pageSize = this.data.pageSize; const pageSize = this.data.pageSize;
// 强制刷新:清除所有缓存并重新从数据库加载 // 强制刷新:清除所有缓存并重新从数据库加载
@ -471,11 +482,20 @@ Page({
keyword: currentKeyword keyword: currentKeyword
} }
// 只有非全部分类时才传递category参数 // 只有非全部分类时才传递category参数
if (currentCategory) { if (categoryParam) {
apiParams.category = currentCategory apiParams.category = categoryParam
} }
API.getProductList(statusList, apiParams) API.getProductList(statusList, apiParams)
.then(res => { .then(res => {
// 验证当前筛选条件是否与刷新开始时一致
if (currentCategory !== this.data.selectedCategory ||
currentKeyword !== this.data.searchKeyword ||
currentRegion !== this.data.selectedRegion) {
console.log('筛选条件已变更,忽略此次刷新结果');
this.setData({ isRefreshing: false });
return;
}
this.setData({ isRefreshing: false }) this.setData({ isRefreshing: false })
if (res.success && res.products) { if (res.success && res.products) {
@ -496,11 +516,20 @@ Page({
keyword: currentKeyword keyword: currentKeyword
} }
// 只有非全部分类时才传递category参数 // 只有非全部分类时才传递category参数
if (currentCategory) { if (categoryParam) {
apiParams.category = currentCategory apiParams.category = categoryParam
} }
API.getProductList(['sold_out'], apiParams) API.getProductList(['sold_out'], apiParams)
.then(soldOutRes => { .then(soldOutRes => {
// 验证当前筛选条件是否与刷新开始时一致
if (currentCategory !== this.data.selectedCategory ||
currentKeyword !== this.data.searchKeyword ||
currentRegion !== this.data.selectedRegion) {
console.log('筛选条件已变更,忽略此次刷新结果(sold_out)');
this.setData({ isRefreshing: false });
return;
}
this.setData({ isRefreshing: false }); this.setData({ isRefreshing: false });
if (soldOutRes.success && soldOutRes.products && soldOutRes.products.length > 0) { if (soldOutRes.success && soldOutRes.products && soldOutRes.products.length > 0) {
@ -534,6 +563,15 @@ Page({
} }
}) })
.catch(err => { .catch(err => {
// 验证当前筛选条件是否与刷新开始时一致
if (currentCategory !== this.data.selectedCategory ||
currentKeyword !== this.data.searchKeyword ||
currentRegion !== this.data.selectedRegion) {
console.log('筛选条件已变更,忽略此次刷新错误');
this.setData({ isRefreshing: false });
return;
}
this.setData({ isRefreshing: false }) this.setData({ isRefreshing: false })
console.error('刷新商品数据失败:', err) console.error('刷新商品数据失败:', err)
wx.showToast({ wx.showToast({
@ -1083,6 +1121,13 @@ Page({
const statusList = ['published']; const statusList = ['published'];
console.log('loadGoods - 查询状态列表:', statusList); console.log('loadGoods - 查询状态列表:', statusList);
// 取消正在进行的请求
if (this.data.currentRequestTask) {
this.data.currentRequestTask.abort();
console.log('已取消旧的API请求');
}
// 直接使用API.getProductList,并在请求完成后清除请求任务标记
API.getProductList(statusList, apiParams) API.getProductList(statusList, apiParams)
.then(res => { .then(res => {
wx.hideLoading(); wx.hideLoading();
@ -1656,7 +1701,7 @@ Page({
}) })
}, },
// 选择地区(强制刷新机制) // 选择地区(强制刷新机制),添加防抖
selectRegion: function (e) { selectRegion: function (e) {
const region = e.currentTarget.dataset.region const region = e.currentTarget.dataset.region
@ -1673,8 +1718,16 @@ Page({
app.globalData.showTabBar = true; app.globalData.showTabBar = true;
} }
// 调用下拉刷新函数实现自动刷新 // 防抖处理:取消之前的定时器
this.onRefresh(); if (this.data.filterDebounceTimer) {
clearTimeout(this.data.filterDebounceTimer);
}
// 设置新的定时器,延迟500ms执行刷新
this.data.filterDebounceTimer = setTimeout(() => {
// 调用下拉刷新函数实现自动刷新
this.onRefresh();
}, 500);
}, },
// 阻止事件冒泡 // 阻止事件冒泡
@ -1682,7 +1735,7 @@ Page({
// 空函数,用于阻止事件冒泡 // 空函数,用于阻止事件冒泡
}, },
// 选择品种 - 使用下拉刷新机制 // 选择品种 - 使用下拉刷新机制,添加防抖
selectCategory: function (e) { selectCategory: function (e) {
// 重新显示tabBar // 重新显示tabBar
const app = getApp(); const app = getApp();
@ -1701,8 +1754,16 @@ Page({
searchKeyword: '', // 清除搜索关键词,筛选框优先级更高 searchKeyword: '', // 清除搜索关键词,筛选框优先级更高
}); });
// 调用下拉刷新函数实现自动刷新 // 防抖处理:取消之前的定时器
this.onRefresh(); if (this.data.filterDebounceTimer) {
clearTimeout(this.data.filterDebounceTimer);
}
// 设置新的定时器,延迟500ms执行刷新
this.data.filterDebounceTimer = setTimeout(() => {
// 调用下拉刷新函数实现自动刷新
this.onRefresh();
}, 500);
}, },
// 查看商品详情 // 查看商品详情

13
utils/api.js

@ -178,7 +178,7 @@ function initBaseUrl() {
// 初始化基础URL // 初始化基础URL
initBaseUrl(); initBaseUrl();
function request(url, method, data) { function request(url, method, data, requestContext = {}) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
// 每次请求都重新初始化BASE_URL,确保使用最新配置 // 每次请求都重新初始化BASE_URL,确保使用最新配置
initBaseUrl(); initBaseUrl();
@ -189,7 +189,7 @@ function request(url, method, data) {
data: data || {} data: data || {}
}); });
wx.request({ const requestTask = wx.request({
url: BASE_URL + url, url: BASE_URL + url,
method: method || 'GET', method: method || 'GET',
data: data || {}, data: data || {},
@ -308,6 +308,11 @@ function request(url, method, data) {
}); });
} }
}); });
// 如果提供了请求上下文,保存请求任务对象
if (requestContext) {
requestContext.task = requestTask;
}
}); });
} }
@ -1056,7 +1061,7 @@ module.exports = {
requestData.keyword = params.keyword; requestData.keyword = params.keyword;
} }
return request('/api/product/list', 'POST', requestData).then(data => { return request('/api/product/list', 'POST', requestData, requestContext).then(data => {
// 添加字段映射,确保产品名称正确显示 // 添加字段映射,确保产品名称正确显示
if (data.success && data.products && Array.isArray(data.products)) { if (data.success && data.products && Array.isArray(data.products)) {
data.products = data.products.map(product => { data.products = data.products.map(product => {
@ -1466,7 +1471,7 @@ module.exports = {
}, },
// 获取商品列表 - 支持未登录用户查看公开商品 // 获取商品列表 - 支持未登录用户查看公开商品
getProductList: function (status = 'published', options = {}) { getProductList: function (status = 'published', options = {}, requestContext = {}) {
const openid = wx.getStorageSync('openid'); const openid = wx.getStorageSync('openid');
// 处理status参数,支持字符串或数组格式 // 处理status参数,支持字符串或数组格式

Loading…
Cancel
Save