1

有没有更好的方法来监控变量的变化并在某个值处触发函数？

目前我有这个-

$(window).on('scroll', function() {
    if(scrolledYet == "ready" && positionNow < 20){
        fadeOutIntro();
        scrolledYet = "yes"; 
    }
    if(scrolledYet != "ready" && positionNow < 840  && positionNow > 20 ){
        $('.logoBlock,.introScrollIcon, .introText').fadeIn('700')
           setTimeout(function() {  $('#nav').fadeIn('1000');},1000);
          setTimeout(function() {introOnOff = "on";},100)
    }
});

positionNow 变量在另一个函数中设置并存储当前滚动位置，有没有更好的方法来构造这个脚本

4

3 回答 3

1

为什么不在 CSS 中完成这一切，它可能会更快？

如果你有一个绝对定位的不可见元素，当用户滚动它时，将创建一个悬停状态，你可以触发你的动画。（您可能需要将许多页面元素作为其 css 后代才能正常工作）

如果您需要在 JS 中执行此操作，您可以采取一些措施来提高速度。正如您现在拥有的那样，每次滚动时您都在创建新功能。尝试设置您的 JS，以便浏览器只需要在页面加载时 JIT 编译 JS，因此将这些函数称为处理程序，您也可以只进行一次 jQuery css 选择，在您的情况下，您使用的是 ID 所以这可能是一个相当快的查找，但如果你做了一个'[data-name=data-value]'，它实际上是一个相当慢的查询。

您还可以将其分解以在进入和退出 [20px-840px] 区域时触发两个新事件，然后您可以使用 underscore.js 对它们进行去抖动。 http://underscorejs.org/#debounce

我知道这是相当高的水平，我没有编写具体的代码，但我希望它有所帮助。

于 2013-01-08T17:05:27.587 回答
1

为什么不使用事件绑定和传播来监控变量值，如果达到你想要的值，然后触发另一个事件？下面是使用演示“对象”的基本思想，但您可以将其应用于您的“positionNow”或任何其他类型的变量，用于可能已经具有可访问属性的任何对象（包括“窗口”对象）。

例如：jsfiddle - http://jsfiddle.net/vepWE/1/

JS：

$("#b").data('myscrollposition', 100);
$("#c").data('myscrollposition', 101);
$("#d").data('myscrollposition', 100);

function f(evt)
{
     $(this).val("desired event triggered");
}

function change(evt)
{
    var m = $(this).data('myscrollposition');
//equivalent to above: var m = $(evt.currentTarget).data('myscrollposition'); 
     if(m == 100)
     {
          $(this).trigger('valuereached');
     }
}

$(".des").on('change', change);
$(".des").on('valuereached', f);
$(".des").trigger('change');

HTML：

<input class = "des" id = "b"></input>
<input class = "des" id = "c"></input>
<input class = "des" id = "d"></input>

注意：还请记住，如果页面上尚不存在您的元素，则必须使用以下语法：

$(".parentcontainer").on("myevent", '.listenforthisalways', function(event){
  alert($(this).text());
});

即使您稍后在页面中添加具有“listenforthisalways”类的元素（在上面的示例中，仅当它被添加为具有类“parentcontainer”的容器的后代）而不是已经具有页面上的元素。

另一个示例在页面上侦听任何添加的带有“myFOO”类的 html 元素，并将事件“myevent”绑定到该元素的函数“myfunction”，即使稍后将其添加到您的页面，如下所示：

   function myfunction(evt)
   {
     //whatever
   } 

  $(document).on("myevent", '.myFOO', myfunction);

希望这可以帮助！

于 2013-01-08T16:38:07.363 回答
0

是的，但它是一些可能并非随处可用的高级 JavaScript 内容（提示 MSIE）。

var o = {_positionNow: 1};
Object.defineProperty(o, "positionNow",
                      {get: function() { return this._positionNow },
                       set: function(positionNow) { this._positionNow = positionNow },
                       enumerable: true,
                       configurable: true});

当然，o可以是任何上下文，比如window你喜欢脏东西。或者，如果您想说远离 JavaScript 1.8.5 及更高版本，则只需搜索一些 KVO（键值观察）模式。

有关defineProperty的更多文档。

于 2013-01-08T16:23:15.897 回答