场景:
应用el-pagination来做分页,当pageSize和currentPage发生变化时,向后端发送申请,获取分页数据。
在这个场景中,失常状况下要在pageSize发生变化时发送一次申请,在currentPage发生变化时发送一次申请。
当初思考一种非凡状况,el-pagination中 总数(total)为123,每页数量(page-size)为20,当前页(current-page)为4。
此时用户点击切换每页数量为50 (page-size 变更为50),这种状况下会间断发送两次申请。
1、首先page-size发生变化 ({current-page: 4, page-size: 20} -> {current-page: 4, page-size: 50} ) ,触发@size-change发送一次申请(申请A)。
2、紧接着el-pagination计算4 x 50 > 123,将current-page自行变更为3 ({current-page: 4, page-size: 50} -> {current-page: 3, page-size: 50} ),这次变更触发@current-change又发送了一次申请(申请B)。
实际上申请A是一个有效申请,即便发送了,也取到了数据,还会被前面的申请B所申请的数据所笼罩。
解决办法,@size-change与@current-change触发后调用雷同的发送http申请的办法,且给这个办法加上防抖,防抖工夫设置10ms。
同步更新到本人的语雀:
https://www.yuque.com/dirackeeko/blog/ydofgb6pkfk1txak