草庐IT

JavaScript函数offsetLeft-缓慢返回值(主要是IE9)

coder 2025-03-27 原文

我在调试新闻动态时遇到了很多困难-我是使用JavaScript从头开始编写的。

除了IE9(以及某些移动浏览器，Opera Mobile)运行缓慢的浏览器外，它在大多数浏览器上都可以正常工作。

使用开发人员工具>探查器使我能够找到问题的根本原因。

这是对offsetLeft的调用，以确定是否旋转代码行进器，即第一个元素成为最后一个元素。

function NeedsRotating() {
    var ul = GetList();
    if (!ul) {
        return false;
    }
    var li = GetListItem(ul, 1);
    if (!li) {
        return false;
    }
    if (li.offsetLeft > ul.offsetLeft) {
        return false;
    }
    return true;
}

function MoveLeft(px) {
    var ul = GetList();
    if (!ul) {
        return false;
    }
    var li = GetListItem(ul, 0);
    if (!li) {
        return false;
    }
    var m = li.style.marginLeft;
    var n = 0;
    if (m.length != 0) {
        n = parseInt(m);
    }
    n -= px;
    li.style.marginLeft = n + "px";
    li.style.zoom = "1";
    return true;
}

返回值似乎要花费300毫秒以上，而股票行情应该每10毫秒向左移动1个像素。

是否有已知的解决方法？

谢谢

最佳答案

DOM操作

我同意@samccone的观点，即如果GetList()和GetListItem()每次都在执行DOM操作，则应尽量保存对那些调用所检索的元素的引用，并减少DOM操作。

then I can just manipulate that variable and hopefully it won't go out of sync with the "real" value by calling offsetLeft.



您只需将对DOM元素的引用存储在变量中。因为它是引用，所以它才是真正的值(value)。这是完全相同的对象。例如。:
var li = ul.getElementsByTagName( "li" )[ index ];

该存储对DOM对象的引用。您可以随时从该对象读取offsetLeft，而无需执行另一个DOM操作(例如getElementsByTagName)来检索该对象。

另一方面，以下内容只会存储该值，而不会保持同步:
var offsetLeft = ul.getElementsByTagName( "li" )[ index ].offsetLeft;

offsetLeft

如果offsetLeft确实是一个瓶颈，是否有可能您可以改写一下以减少阅读量呢？在这种情况下，每次轮换出第一项内容时，您是否可以为新的第一项内容读取一次offsetLeft，然后仅在每次调用MoveLeft()时将该值减一，直到达到0(或其他任何值)？例如。
function MoveLeft( px ) {

  current_offset -= px;

如果您想更加积极地避免offsetLeft，也许可以做一些事情，一次读取每个列表项的宽度，一次读取第一项的offsetLeft，然后使用这些值确定何时旋转，而无需再次调用offsetLeft。

全局变量

I think I get it... so elms["foo"] would have to be a global variable?

I think really I just need to use global variables instead of calling offsetLeft every 10 ms.



您不需要使用全局变量，实际上您应该避免使用它-这是一个糟糕的设计。在不使用全局变量的情况下，至少可以采用两种良好的方法:
  • 您可以将整个程序包装在一个闭包中:
    ( function () {

  var elements = {};


  function NeedsRotating() {

    ...

  }  


  function example() {

    // The follow var declaration will block access
    // to the outer `elements`

    var elements;

  }


  // Rest of your code here

} )();
    elements的作用域是包含它的匿名函数。它不是全局变量，因此在匿名函数之外不可见。只要您在内部函数中未声明相同名称的变量，匿名函数内的任何代码(包括函数(在本例中为NeedsRotating()))都将可见。
  • 您可以将所有内容封装在一个对象中:
    ( function () {

  var ticker = {};

  ticker.elements = {};


  // Assign a method to a property of `ticker`

  ticker.NeedsRotating = function () {

    // All methods called on `ticker` can access its
    // props (e.g. `elements`) via `this`

    var ul = this.elements.list;

    var li = this.elements.list_item;


    // Example of calling another method on `ticker`

    this.do_something();

  }  ;


  // Rest of your code here


  // Something like this maybe

  ticker.start();

} )();

    在这里，我再次将所有内容包装在一个匿名函数中，因此，即使ticker也不是全局变量。

    • 对评论的回应

    首先，对于setTimeout，最好这样做:
    t = setTimeout( TickerLoop, i );

    而不是:
    t = setTimeout("TickerLoop();", i);

    在JS中，函数是一流的对象，因此您可以将实际的函数对象作为参数传递给setTimeout，而不是传递字符串，就像使用eval一样。

    您可能需要考虑使用setInterval而不是setTimeout。

    Because surely any code executed in setTimeout would be out of scope of the closure?



    实际上并非如此。在定义函数时形成闭包。因此，通过setTimeout调用函数不会干扰函数对封闭变量的访问。这是一个简单的演示代码段:
    ( function () {

  var offset = 100;


  var whatever = function () {

    console.log( offset );

  };


  setTimeout( whatever, 10 );

} )();

    但是，setTimeout将干扰方法中this的绑定(bind)，如果将所有内容封装在一个对象中，这将是一个问题。以下内容将不起作用:
    ( function () {

  var ticker = {};

  ticker.offset = 100;


  ticker.whatever = function () {

    console.log( this.offset );

  };


  setTimeout( ticker.whatever, 10 );

} )();

    在ticker.whatever内部，this不会引用ticker。但是，您可以在此处使用匿名函数来形成闭包来解决该问题:
    setTimeout( function () { ticker.whatever(); }, 10 );

    Should I store it in a class variable i.e. var ticker.SecondLiOffsetLeft = GetListItem(ul, 1).offsetLeft then I would only have to call offsetLeft again when I rotate the list.

    I think that's the best alternative to a global variable?



    关键的事情是:
  • 每次旋转列表时，请一次访问offsetLeft。
  • 如果将列表项存储在变量中，则可以访问它们的offsetLeft属性，而无需重复执行诸如getElementsByTagName()这样的DOM操作来获取列表对象。

    • 如果将所有内容包装在一个对象中，则＃2中的变量可以是一个对象属性，也可以是一个可以通过其闭包作用域访问的变量。我可能会将其包装在一个对象中。

    我更新了“DOM操作”部分以阐明，如果存储对DOM对象的引用，它将是完全相同的对象。您不想直接存储offsetLeft，因为那样只会存储值，并且不会保持同步。

    但是，您决定存储它们(例如，对象属性或变量)，则可能应该一次检索所有li对象并将它们存储在类似数组的结构中。例如。
    this.li = ul.getElementsByTagName( "li" );

    每次旋转时，请以某种方式指明当前项目，例如:
    this.current_item = ###;

// or

this.li.current = this.li[ ### ];


// Then

this.li[ this.current_item ].offsetLeft

// or

this.li.current.offsetLeft

    或者，如果您愿意，可以将li对象存储在数组中，并针对每次旋转进行此操作:
    this.li.push( this.li.shift() );

// then

this.li[0].offsetLeft

    关于JavaScript函数offsetLeft-缓慢返回值(主要是IE9)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9928016/

    JavaScriptoffsetLeftcodebrinternet-explorerinternet-explorer-9unobtrusive-javascript

    有关JavaScript函数offsetLeft-缓慢返回值(主要是IE9)的更多相关文章

    1. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

      我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

    2. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

      我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

    3. ruby-on-rails - 在 ruby​​ 中使用 gsub 函数替换单词 - 2

      我正在尝试用ruby​​中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案 啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了

    4. ruby - 在 Ruby 中有条件地定义函数 - 2

      我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

    5. ruby - Ruby 中的隐式返回值是怎么回事？ - 2

      所以我开始关注ruby​​，很多东西看起来不错，但我对隐式return语句很反感。我理解默认情况下让所有内容返回self或nil但不是语句的最后一个值。对我来说，它看起来非常脆弱(尤其是)如果你正在使用一个不打算返回某些东西的方法(尤其是一个改变状态/破坏性方法的函数!)，其他人可能最终依赖于一个返回对方法的目的并不重要，并且有很大的改变机会。隐式返回有什么意义？有没有办法让事情变得更简单？总是有返回以防止隐含返回被认为是好的做法吗？我是不是太担心这个了？附言当人们想要从方法中返回特定的东西时，他们是否经常使用隐式返回，这不是让你组中的其他人更容易破坏彼此的代码吗？当然，记录一切并给出

    6. ruby - 在 Ruby 中按名称传递函数 - 2

      如何在Ruby中按名称传递函数？(我使用Ruby才几个小时，所以我还在想办法。)nums=[1,2,3,4]#Thisworks,butismoreverbosethanI'dlikenums.eachdo|i|putsiend#InJS,Icouldjustdosomethinglike:#nums.forEach(console.log)#InF#,itwouldbesomethinglike:#List.iternums(printf"%A")#InRuby,IwishIcoulddosomethinglike:nums.eachputs在Ruby中能不能做到类似的简洁？我可以只

    7. C51单片机——实现用独立按键控制LED亮灭（调用函数篇） - 2

      说在前面这部分我本来是合为一篇来写的，因为目的是一样的，都是通过独立按键来控制LED闪灭本质上是起到开关的作用，即调用函数和中断函数。但是写一篇太累了，我还是决定分为两篇写，这篇是调用函数篇。在本篇中你主要看到这些东西！！！1.调用函数的方法（主要讲语法和格式）2.独立按键如何控制LED亮灭3.程序中的一些细节（软件消抖等）1.调用函数的方法思路还是比较清晰地，就是通过按下按键来控制LED闪灭，即每按下一次，LED取反一次。重要的是，把按键与LED联系在一起。我打算用K1来作为开关，看了一下开发板原理图，K1连接的是单片机的P31口，当按下K1时，P31是与GND相连的，也就是说，当我按下去时

    8. ruby-on-rails - 将字符串转换为 ruby​​-on-rails 中的函数 - 2

      我需要一个通过输入字符串进行计算的方法，像这样function="(a/b)*100"a=25b=50function.something>>50有什么方法吗？ 最佳答案 您可以使用instance_eval:function="(a/b)*100"a=25.0b=50instance_evalfunction#=>50.0请注意，使用eval本质上是不安全的，尤其是当您使用外部输入时，因为它可能包含注入(inject)的恶意代码。另请注意，a设置为25.0而不是25，因为如果它是整数a/b将导致0(整数)。

    9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

      我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

    10. ruby - 在 ruby​​ 中使用 .try 函数和 .map 函数 - 2

      我需要从json记录中获取一些值并像下面这样提取curr_json_doc['title']['genre'].map{|s|s['name']}.join(',')但对于某些记录，curr_json_doc['title']['genre']可以为空。所以我想对map和join()使用try函数。我试过如下curr_json_doc['title']['genre'].try(:map,{|s|s['name']}).try(:join,(','))但是没用。 最佳答案 你没有正确传递block。block被传递给参数括号外的方法

    随机推荐