Question

我在本网站的一个答案中找到了一个代码。我想知道该代码是否可以用简单的JS编写？此外，如果有人可以通过简单的Javascript帮助我理解它，我将非常感谢您的帮助。

该代码用于修复在更改chrome中的选项卡时为setTimeout和setInterval等计时函数丢失的时间。

代码就是这样 -

var div = $('div');
var a = 0;
var delay = (1000 / 30);
var now, before = new Date();


setInterval(function() {
    now = new Date();
    var elapsedTime = (now.getTime() - before.getTime());
    if(elapsedTime > delay)
        //Recover the motion lost while inactive.
        a += Math.floor(elapsedTime/delay);
    else
        a++;
    div.css("left", a);
    before = new Date();    
}, delay);

请注意，我是本网站的新手，因此，根据我目前的声誉，我无法对我所指的问题的答案发表评论。

Answer 1

OP的问题中有两个jquery调用：

$('div')
div.css("left", a)

第一个：
$('div') - ＆gt; [].slice.call(document.querySelectorAll('div'))

根据传递的参数返回在DOM中找到的匹配元素的集合 - jQuery docs

它返回由选择器'div'匹配的元素的集合（数组）。这意味着页面上的所有div元素。

让我们删除普通的javascript部分：

document.querySelectorAll('div')使用选择器document选择'div'上的所有元素。这里的问题是querySelectorAll返回NodeList，而不是数组。它是一个类似于数组的对象。
[].slice 返回数组部分的浅表副本 - MDN
它可以采用类似对象的数组（例如querySelectorAll的结果）。结果是一个实际的数组

此时var div包含页面上所有div元素的数组。

第二个 div.css("left", a) - ＆GT; div.forEach(function (item) {item.style.left = a + 'px';})

为每个匹配的元素设置一个或多个CSS属性 - jQuery Docs

它将样式属性设置为jQuery元素。在这种情况下，它会将css left属性设置为a。 a是一个数字，jQuery将'px'附加到该数字以使其成为字符串。

让我们删除普通的javascript部分：

div.forEach()循环遍历div变量，该变量现在是一个数组。对于数组中的每个项目，执行以下函数：
function (item) { item.style.left = a + 'px'; }此函数采用参数（item）。这是一个dom元素，存储在div数组中。每个dom元素都有一个带有css属性的样式对象。此函数将a变量（数字）连结'px'加到其中，并将其设置为left属性。

基本上，这个函数循环遍历div数组中的每个项目，并将styles.left属性设置为a值。

完整的代码是：

var div = [].slice.call(document.querySelectorAll('div'));
var a = 0;
var delay = (1000 / 30);
var now, before = new Date();

setInterval(function() {
    now = new Date();
    var elapsedTime = (now.getTime() - before.getTime());
    if(elapsedTime > delay)
        //Recover the motion lost while inactive.
        a += Math.floor(elapsedTime/delay);
    else
        a++;
    div.forEach(function (item) {
         item.style.left = a + 'px';
    })
    before = new Date();    
}, delay);

jQuery代码用作Javascript

1 个答案: