一个由局部变量引发的bug

2020-07-01 16:54:57 浏览数 (2)

最近发现了一个由局部变量引起的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;
    }
})();

0 人点赞