要用作Javascript的jQuery代码

我在这个网站上的一个答案中找到了一个代码。我想知道这些代码是否可以用简单的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);

---

请注意，我是该网站的新手，因此以我目前的声誉，我无法对我所指问题的答案发表评论。OP的问题中有两个jquery电话：

$（'div'）

div.css（“左”，a）

第一个：

$（'div'）

->

[].slice.call（document.queryselectoral（'div'））

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

它返回选择器

'div'

匹配的元素集合（数组）。这意味着页面上的所有

div

元素

让我们剥离普通javascript部分：

• document.querySelectorAll（'div'）

  使用选择器选择

  文档上的所有元素。这里的问题是
  querySelectorAll
  返回的是
  NodeList
  ，而不是数组。这是一个类似数组的对象

• [].slice

  返回数组部分的浅拷贝-
  它可以采用类似数组的对象（例如

  querySelectorAll

  的结果）。结果是一个实际数组

此时，

var div

包含页面上所有

div

元素的数组

第二个

div.css（“left”，a）

->

div.forEach（函数（项）{item.style.left=a+'px'；}）

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

它为jQuery元素设置一个样式属性。在本例中，它将css

left

属性设置为

a

a

是一个数字，jQuery将

'px'

附加到该数字后使其成为字符串

让我们剥离普通javascript部分：

• div.forEach（）

  在

  div

  变量上循环，该变量现在是一个数组。对于数组中的每个项，执行以下函数：

• function（item）{item.style.left=a+'px'；}

  此函数接受一个参数（

  item

  ）。这是一个dom元素，存储在

  div

  数组中。每个dom元素都有一个带有css属性的styles对象。此函数将

  a

  变量（一个数字）concats

  'px'

  设置为

  left

  属性

因此，基本上，此函数在

div

数组中的每个项上循环，并将

style.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);

---

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

$（'div'）

div.css（“左”，a）

第一个：

$（'div'）

->

[].slice.call（document.queryselectoral（'div'））

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

它返回选择器

'div'

匹配的元素集合（数组）。这意味着页面上的所有

div

元素

让我们剥离普通javascript部分：

• document.querySelectorAll（'div'）

  使用选择器选择

  文档上的所有元素。这里的问题是
  querySelectorAll
  返回的是
  NodeList
  ，而不是数组。这是一个类似数组的对象

• [].slice

  返回数组部分的浅拷贝-
  它可以采用类似数组的对象（例如

  querySelectorAll

  的结果）。结果是一个实际数组

此时，

var div

包含页面上所有

div

元素的数组

第二个

div.css（“left”，a）

->

div.forEach（函数（项）{item.style.left=a+'px'；}）

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

它为jQuery元素设置一个样式属性。在本例中，它将css

left

属性设置为

a

a

是一个数字，jQuery将

'px'

附加到该数字后使其成为字符串

让我们剥离普通javascript部分：

• div.forEach（）

  在

  div

  变量上循环，该变量现在是一个数组。对于数组中的每个项，执行以下函数：

• function（item）{item.style.left=a+'px'；}

  此函数接受一个参数（

  item

  ）。这是一个dom元素，存储在

  div

  数组中。每个dom元素都有一个带有css属性的styles对象。此函数将

  a

  变量（一个数字）concats

  'px'

  设置为

  left

  属性

因此，基本上，此函数在

div

数组中的每个项上循环，并将

style.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方法；查看每一个的功能，然后找到合适的替代品。你能行！好的，但我不懂这行代码？var elapsedTime=（now.getTime（）-before.getTime（））；为什么现在被定义为新日期（）；在上面的代码中两次？一次在全局空间中，一次在setInterval函数中？

现在

从不在外部范围中设置，只声明。阅读基本的JavaScript语法教程对您非常有帮助；看看他们每个人都做了什么