最近发现了一个由局部变量引起的Bug,在低版本的浏览器上几乎是必现。 先看一下这段代码:
代码语言:javascript复制function report(src) {
let reporter = new Image();
reporter.src = src;
}
这是一段常见的代码:在前端通常使用 image 对象进行数据的上报。
但是,这段代码在低版本的浏览器上,并不是每次都会发起 HTTP 的请求,进而导致数据的丢失。
丢失的原因
在上面那段代码中,reporter 是 report 函数中的局部变量,当函数调用完成后,局部变量随即被销毁,而此时浏览器很有可能还没有来得及发出请求。
解决方案
既然定位到了问题是由被销毁的局部变量导致的,那么很容易想到利用闭包解决这个问题。
代码语言:javascript复制let report = (function(){
let reporters = [];
return function(src) {
let reporter = new Image();
reporters.push(reporter);
reporter.src = src;
}
})();