Question

是否有更好的方法来监控变量以进行更改并触发某个值的函数？

目前我有这个 -

$(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变量并存储当前滚动位置，是否有更好的方法来构造此脚本

Answer 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);

希望这有帮助！

Answer 2

为什么不在CSS中执行此操作，它可能会更快？

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

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

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

我知道这是非常高的水平，我没有写特定的代码，但我希望它有所帮助。

Answer 3

是的，但它是一些高级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的更多文档。

变量的触发功能

3 个答案: