我的变量值改变了，如何相应地更新我的函数？

Question

我已经有一个多星期没有遇到这个问题了，这让我很抓狂。我不是 "code" 那种人，尽管我设法做到了这一点，但我确实已经达到了极限。希望有人能帮我解决问题

所以，这是我的问题：我正在使用三个插件：Flexslider、Inviewevent (https://remysharp.com/2009/01/26/element-in-view-event-plugin) 和 Scrollify。我的网站分为多个部分，每个部分都是全屏的，并且由于 scrollify 插件及其 waypoints 系统，每次用户滚动或使用键盘时，网站都会自动滚动到下一个航点，并带有幻灯片动画。由于每个部分都是全屏的，我停用了滚动条。我正在使用 Flexslider，因为我试图让用户垂直和水平滚动。为了给你一个想法，我从这个网站得到了极大的启发，并且基本上试图实现同样的事情：http://www.kunstler.it/.

现在，Flexslider 插件有一个名为 "keyboard" 的选项。这是一个布尔值。如果 "true"，用户可以使用键盘上的箭头从一张幻灯片转到另一张幻灯片。我的问题是即使在视线之外（当我在网站的不同部分时），滑块仍在注册键盘输入，这让我很困扰。我不希望用户在视图外时能够操纵滑块。所以我使用插件 Inviewevent 来设置条件：如果滑块在视图中，则键盘工作，如果不在视图中，则键盘不工作。我也会对移动设备上的触摸滑动功能做同样的事情，但由于插件也为此提供了一个选项，所以我现在主要关注键盘，因为它应该基本上是一样的。

这是我的 Jquery :

$(window).load(function(){
    var loopCount = 0; 
    var $keyboard;

    $('.flexslider').bind('inview', function (event, visible) { // Plugin "Inviewevent". Allows me to detect if an element is inview or not
        if (visible == true) {
            $keyboard = true;
            console.log($keyboard); // Is true
        }
        else {
            $keyboard = false;
            console.log($keyboard); // Is false
        }
    });
    $('.flexslider').flexslider({ // Plugin Flexslider. Contains the options and Callback that I use
        slideshow: false,
        animation: "slide",
        controlNav: false,
        directionNav: false,
        animationLoop: false,        
        keyboard: $keyboard, // This is the option that I'm interested in. I tried to use the variable $keyboard to define it, but (to my very little knowledge) it would seem that it only works once when the function is initialised. It doesn't change dynamically which is what I'm trying to do.
        end : function(slider){  // This callback fires when the user reaches the last slide
            currentLoopCount = loopCount;
            loopCount = currentLoopCount + 1;
        },
        after : function(slider){
            if (loopCount > 0 && slider.currentSlide === 0){ 
                $.scrollify.next(); // Plugin Scrollify. When the user go back to the first slide, the wbesite automatically scroll to the next section. I suck at code and I find it very neat :D
            }
        },
    });
$('.button').click(function(){
        alert($keyboard);
}); // This is not really important. I just used it to confirm the fact that the $keyboard variable do what I want it to do. When my slider is in view, it is true, and when it's not, it's false. No problem here.

});

就是这样。对于我所关心的一切来说，这可能是一种完全不同的方法，无论如何，我能走到这一步已经是一个奇迹了。我很确定我所做的一些事情不符合人体工程学或不推荐，所以如果你愿意，请毫不犹豫地纠正它。我还想为我的不清楚、我的 vocabulary/spelling 错误和最后的奇怪句子道歉：英语不是我的母语。还要记住，我不擅长编码。 HTML 和 CSS 是小菜一碟，但 javascript 不是我真正的朋友，尽管我理解它的理论。最后一件事，我想添加我使用的所有插件的链接，但我不能 post 超过 2 个链接，因为我还没有足够的声誉。我保留 Inviewevent 只是因为它是最难找到的，其余的可以通过 google 轻松访问。真的很抱歉。

就是这样了...如果您有任何问题或需要我做任何详细说明，我显然可以联系您。不要担心你的英语：我理解它比我写它更好。最后；如果您决定走技术路线，请尝试向我解释一下，因为我不想只是 copy/paste，但我想学习和提高自己。先感谢您，亲切地，一些目瞪口呆的家伙:)

Answer 1

如果您正在寻找的功能不是内置的，您将不得不修改插件。您对 "keyboard" 属性仅在初始化时使用的评估是正确的——这是 jQuery 插件的常见模式。

Answer 2

所以，我设法自己解决了这个问题。重要的是它做了我想让它做的事：在视线之外时，用户不可能手动触发任何幻灯片。

我使用了 Flexslider 的修改版本，其中包含一个 destroy 方法（在此处找到它：https://github.com/bradgreens/FlexSlider/tree/release-2-2-0）

并且我使用了inviewevent插件，结合destroy方法实现了我想要的效果:

$('#portfolio').bind('inview', function (event, visible) {
    if (visible == true){
        initflex();
    }
    else if (visible == false){
        $('.flexslider').flexslider("destroy");
    }
});

function initflex() {
    $('.flexslider').flexslider({ //changed selector from .flexslider
        slideshow: false,
        animation: "slide",
        controlNav: false,
        directionNav: false,
        animationLoop: false,        
        keyboard: true,
        pauseInvisible: true,
        multipleKeyboard: false,
        controlNav: false,
        end : function(slider){
            currentLoopCount = loopCount;
            loopCount = currentLoopCount + 1;
        },
        after : function(slider){
            if (loopCount > 0 && slider.currentSlide === 0){ // meh
                $.scrollify.next();  
            }
        },
    });
};

我的想法是销毁然后重新初始化函数，这样它会考虑我的变量，但事实是在视图之外销毁它并在视图中初始化它完美地工作（虽然有一个非常短的"pop" 初始化时的效果 - 几乎不可见）。

希望对您有所帮助！

我的变量值改变了，如何相应地更新我的函数？

My variable value changed, how to update my function accordingly?

jquery

dynamic

flexslider

inview