JavaScript webkit语法错误,在Firefox中正常工作;价值vs.引用

JavaScript webkit syntax error, work fine in Firefox; value vs. reference

本文关键字:工作 引用 vs 价值 常工作 错误 语法 webkit Firefox JavaScript      更新时间:2023-09-26

我正在浏览DOM元素的集合,当找到标准时,DOM元素获得一个CSS类flashMe添加到它。

CSS是一个1秒的动画-然后我使用setTimeout在1.5秒后删除CSS类。

如果我在循环中使用function (varCounter),它将使用varCounter引用,而不是value。所以我使用函数(passsedindex = varCounter)传递当前值,并在Firefox中工作得很好。

In WebKit (Chrome &Safari)相同的代码抛出:SyntaxError: Expected token ')'在第6行:function(pIndex=b)

var self=this;
for(var b=0;b<this.someDOMcollection.length;b++){
    if(this.someDOMcollection[b].id==someCriteria){
        this.someDOMcollection[b].classList.add('flashMe');
        setTimeout(
            function(pIndex=b){
                self.someDOMcollection[pIndex].classList.remove('flashMe');
            }
        ,1500);//end Timeout
        break;
    }//if
}//b

一种绕过它的方法是创建一个单独的函数,并传递它当前找到的索引值,但理想情况下,我希望将它保持在同一个块中。

Default values是ES6的扩展,目前只有Firefox支持。

见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/default_parameters

这里的简单解决方案是将值存储在闭包中:
var self=this;
for(var b=0;b<this.someDOMcollection.length;b++){
    (function(pIndex){
        if(this.someDOMcollection[b].id==someCriteria){
            this.someDOMcollection[b].classList.add('flashMe');
            setTimeout(
                function(){
                    self.someDOMcollection[pIndex].classList.remove('flashMe');
                }
            ,1500);//end Timeout
            break;
        }//if
    })(b);
}//b

function(pIndex=b){是无效的JavaScript(尚未)。使用立即调用的函数表达式(IIFE),而不是:

(function(pIndex){ // Accept a parameter, named `pIndex`.
    setTimeout(function(){
        self.someDOMcollection[pIndex].classList.remove('flashMe');
    }, 1500);
})(b); // Pass `b` to the inner function.