async function addOne (index, row) { // 增加空白行,并改变焦点
let maxID
let maxID1
let maxID2
// 计算本页中表格中数据的 最大的ID值
// 下面这段if语句存在 异步问题,我click快了(慢点没事),会造成无法得到我需要的 maxID,请问不改变语句顺序的情况下,
// 怎么处理这个异步,
if (data.searchResult.length >= 1) {
maxID1 = Math.max.apply(Math, data.searchResult.map(item => { return item.id })) + 1
} else {
maxID1 = 1
}
// 从后端获取最大id值
await getMethod(data.url,).then(res =>{
if (res.length >= 1) {
maxID2 = Math.max.apply(Math, res.map(item => { return item.id })) + 1
} else {
maxID2 = 1
}
// 比较两个id值,取最大值, 我click快了(慢点没事)
if (maxID1 > maxID2 ) { maxID = maxID1 } else { maxID = maxID2 }
})
// 调用自定义函数 emptyFields()生成空白对象, 并添加到数据
data.searchResult.push(emptyFields( data.url, maxID))
你的异步在于getMethod()这个函数是异步的, 而最后的那一行代码没有在这个异步函数的回调里面执行。
所以会出现执行data.searchResult.push(emptyFields( data.url, maxID)) 这句的时候 maxID其实还没赋值的情况。
你把这行代码往上放几行, 放进回调函数里面就好了
包进promise里面,然后根据maxID是否有值执行resolve,也就是maxID没有被赋值上之前不会进入下一步回调。
把你这个方法加一个防抖节流函数呢,使的点击事件在一段时间内只能执行一次
防抖函数
1.1 概念:
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。
1.2 使用场景:
就像是我的搜索栏功能,是在里面内容变化后就实时触发搜索事件,但是有时候我们输
的内容很长,在没有输完的时候就触发了事件,这样对性能来说是不好的,造成了很多
无用的请求,这时候就需要用到防抖函数,来让其在搜索内容变化后的200毫秒内如果
没有再更改才发起请求。
1.3 实现防抖函数的思路:
在高频触发事件的时候,取消原来的延时事件。
function debounce( fn ){ // 传一个回调函数
let Mytime = null ;
return function( ){
clearTimeout( Mytime ) ; // 清除定时器
Mytime = setTimeout( () => {
fn.apply(this,arguments)
}, 200)
}
}
节流函数
2.1 概念:
高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率;
2.2 使用场景:
就像我接了一个任务,只能在5秒完成任务给回复,在执行后的这5秒内,你再怎么给
我布置任务我都不管直接当没听到,直到到5秒后执行完这个任务,你才可以再次给
我布置任务,以此类推。。。
2.3 实现思路:
每次触发事件时都判断当前是否有等待执行的延时函数,如果有直接截断事件不用往下执行了;
2.4 具体实现:
function throttle( fn ){
let canUse = true ; // 设置一个开关
return function(){
if(!canUse ){ return false } // 如果开关已经关掉了就不用往下了
canUse = false // 利用闭包刚进来的时候关闭开关
setTimeout( ( ) => {
fn.apply(this,arguments)
canUse = true // 执行完才打开开关
},500)
}
}
防抖函数和节流函数的一个区别就是防抖是按照最后一次触发为下一次事件执行的时间计算点,
前面的没满足间隔时间的都从最后这一次开始来决定什么时候执行延时事件;
而节流函数是按照第一次触发事件作为时间计算点,后面没到间隔时间的事件都忽略;
赋值操作放进异步的回调里
let maxID
let maxID1
let maxID2
// 计算本页中表格中数据的 最大的ID值
// 下面这段if语句存在 异步问题,我click快了(慢点没事),会造成无法得到我需要的 maxID,请问不改变语句顺序的情况下,
// 怎么处理这个异步,
if (data.searchResult.length >= 1) {
maxID1 = Math.max.apply(Math, data.searchResult.map(item => { return item.id })) + 1
} else {
maxID1 = 1
}
// 从后端获取最大id值
await getMethod(data.url,).then(res =>{
if (res.length >= 1) {
maxID2 = Math.max.apply(Math, res.map(item => { return item.id })) + 1
} else {
maxID2 = 1
}
// 比较两个id值,取最大值, 我click快了(慢点没事)
if (maxID1 > maxID2 ) { maxID = maxID1 } else { maxID = maxID2 };
// 调用自定义函数 emptyFields()生成空白对象, 并添加到数据
data.searchResult.push(emptyFields( data.url, maxID));
})
async addOne(index, row) {
// 增加空白行,并改变焦点
let maxID;
let maxID1;
// 计算本页中表格中数据的 最大的ID值
// 下面这段if语句存在 异步问题,我click快了(慢点没事),会造成无法得到我需要的 maxID,请问不改变语句顺序的情况下,
// 怎么处理这个异步,
if (data.searchResult.length >= 1) {
maxID1 =
Math.max.apply(
Math,
data.searchResult.map((item) => {
return item.id;
})
) + 1;
} else {
maxID1 = 1;
}
// 从后端获取最大id值
let maxID2 = await this.fun();
// 比较两个id值,取最大值, 我click快了(慢点没事)
maxID = maxID1 > maxID2 ? maxID1 : maxID2;
// 调用自定义函数 emptyFields()生成空白对象, 并添加到数据
data.searchResult.push(emptyFields(data.url, maxID));
},
fun() {
return new Promise((resolve, reject) => {
getMethod(data.url).then((res) => {
let maxID2 =
res.length >= 1
? Math.max.apply(
Math,
res.map((item) => {
return item.id;
})
) + 1
: 1;
resolve(maxID2);
});
});
},