变量变化触发功能答案

【问题标题】：Trigger function on variable change变量变化触发功能
【发布时间】：2013-01-09 01:05:27
【问题描述】：

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

目前我有这个 -

$(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 变量在另一个函数中设置并存储当前滚动位置，有没有更好的方法来构造这个脚本

【问题讨论】：

嗯，您已经在监控它，这就是为什么您在滚动时检查它的价值。你不是吗？
您的滚动位置可以在 {element-with-scrollbar}.scrollTop() 中找到，另请参阅此处developer.mozilla.org/de/docs/DOM/element.scrollTop 和 api.jquery.com/scrollTop
另见此解决方案：stackoverflow.com/questions/14202770/…
是的 - 但在当前设置中，它似乎反应出乎意料 - 如果我更改脚本，因此它只会在每个场景中触发每组指令一次，并且我在第二个函数中提醒 poistionnow 变量 -它每次都有不同的高度数字 - 这让我认为必须有更好的方法来监控变量，因为它看起来不太准确？

标签： jquery

【解决方案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);

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案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的文档。

【讨论】：