jQuery代码用作Javascript

jQuery code to be used as Javascript

本文关键字：Javascript 代码 jQuery      更新时间：2023-09-26

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

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

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

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

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

让我们去掉普通的JavaScript部分：

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

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

第二个 div.css("left", a) -> 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);
相关文章：