TOGOUTECH

javascript - 在事件闭包中访问可变变量

coder 2024-07-30 原文

我正在尝试使用 mousetrap Javascript 插件以类似的方式处理一些击键，所以我想按如下方式编写代码:

    var keys = [ 'b', 'i', 'u'];
    for (var i=0; i < 3; ++i) {
        var iKey = keys[i];
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'command+' + iKey,
                'command+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            ( function( e ) {
                console.log( "you clicked: " + i );
        } ) );

    }

但是，显然，i 是可变的。但是，我不确定如何在响应中竞争事件参数的地方编写闭包。关于如何处理这种情况的建议？

最佳答案

how to write a closure where I am competing the event parameter in the response

在整个循环体周围使用闭包(如@dandavis 所示)，或者仅在处理程序周围使用它:

…
    Mousetrap.bind(
        [   'command+' + iKey,
            'command+' + iKeyUpper,
            'ctrl+' + iKey,
            'ctrl+' + iKeyUpper],
        (function(_i) { // of course you can use the name `i` again
            return function( e ) {
                console.log( "you clicked: " + _i );
            };
        })(i) // and pass in the to-be-preserved values
    );

关于javascript - 在事件闭包中访问可变变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17218075/

可变javascriptsection39iKeyUpperclosuresdom-eventsmousetrap

有关javascript - 在事件闭包中访问可变变量的更多相关文章

  1. javascript - 如何检查是否支持 javascript 类型的数组？ - 2

    想用javascript测试如果浏览器支持类型化数组http://caniuse.com/#feat=typedarrays我试过了，但似乎不是好方法，因为有些浏览器只提供部分支持..:if(window.ArrayBuffer){alert('typedarraysupported')} 最佳答案 似乎有些浏览器(IE10)不支持Uint8ClampedArray，如果这是您打算使用的功能，您可以检查一下if('Uint8ClampedArray'inwindow){...如果检查返回false，则不支持类型化数组和/或限定数组。

  2. javascript - 使用 Jasmine 测试异步回调 - 2

    我正在使用Jasmine2.1。我正在尝试使用Jasmine2.1来测试模块。我的模块之一具有异步执行代码的功能。当应用程序完成执行时，我需要测试函数的结果。有没有办法做到这一点？目前，我的模块看起来像这样:varotherModule=require('otherModule');functionMyModule(){}MyModule.prototype.state='';MyModule.prototype.execute=function(callback){try{this.state='Executing';varm=newotherModule.Execute(funct

  3. javascript replaceChild 不起作用 - 2

    我是计算机科学专业的学生，​​我们正在用javascript做练习，练习是:“用ID为“numberFour”且文本为“Mistreatment”的新项目替换项目编号4。”这是我做练习之前的样子:第一:寻找伴侣第二:无聊第三:缺乏服从第四:虐待第五点:寻求伙伴关系然后我写了这段js代码来完成作业:varvier=document.createElement("li");vier.innerHTML="Numberfour:Mistreatment";vier.setAttribute("id","numberFour");varlijst=document.querySelector(

  4. javascript - 如何在 AngularJS 中绑定(bind)自定义事件？ - 2

    我有一个自定义事件core-transitionend(实际上由Polymer触发)，我可以使用document.addEventListener()设置事件处理程序.但在AngularJS中执行此操作的最佳做​​法是什么？或者，我可以在DOM中明确设置一个处理程序，即,但是如何在AngularJS中定义这个函数呢？ 最佳答案 参见thisfiddle，我在这里创建了一个自定义指令，它将事件绑定(bind)到元素，angular.module('HelloApp',[]).directive('customDir',function

  5. javascript - 组合与多重继承有何不同？ - 2

    在某些情况下，提倡组合而不是继承。我看到这种情况在Ruby和Javascript社区中越来越多地发生。组合听起来很像多重继承。我什至在一些Ruby实现的内部读到过，模块组合是带有少量语法糖的多重继承。是一样的吗？如果不是，它与多重继承有何不同？ 最佳答案 这取决于您所说的“多重继承”和“组合”是什么意思。如果组合和继承都只是意味着添加到对象响应的消息列表中，那么它们在定义上是相等的。假设类很简单virtualtables方法，并且语言中的每个对象都是由对类和一些数据的引用定义的。如果对象通过调用与其类关联的方法查找函数来响应消息，并

  6. javascript - AngularJS $http : how to avoid redirect following - 2

    在AngularJS应用程序中，我对服务器url进行$http.post调用。此url的成功响应是30x重定向，我的问题是$http.post严格遵循此重定向并在成功回调中返回最终调用的结果。我想拦截此重定向并手动将用户重定向(更改浏览器url)到最终页面。可能吗？ 最佳答案 根据docs，$http服务是一个核心Angular服务，它通过浏览器的XMLHttpRequest对象或通过JSONP促进与远程HTTP服务器的通信。了解这一点，并了解XMLHttpRequest的规范，拦截重定向可能是不可能的。W3CspecforXMLH

  7. javascript - Iron Router 和 Meteor 中的服务器端路由 - 2

    转发似乎在Meteor中，我们无法调用服务器端路由来将文件呈现到页面，而无需从我们的正常工作流程中进行某种变通，根据我所阅读的有关服务器端路由的内容。我希望我在这一点上是错的，并且有一种简单的方法可以实现我想要做的事情......**抱歉，如果这有点长，但我认为在这种情况下提供更多的背景和上下文是必要的**软件/版本我正在使用最新的IronRouter1.*和Meteor1.*并且开始时，我只使用帐户密码。背景/语境我有一个onBeforeAction，它只是根据用户是否登录将用户重定向到欢迎页面或主页:两者/routes.jsRouter.onBeforeAction(functio

  8. javascript - 通过使用带有 CSS 的图像显示背景网格 - 2

    UPDATEDDEMO工作得很好，除了当我改变时背景图像正在调整大小:background-size:20px20px;是否可以保持原图大小，让背景图重叠(隐藏图片超出左上框(20px20px)的部分)？B计划是在设置的base64图像内容中用JS裁剪图像... 最佳答案 使用只有左边框和上边框的svg图像可能就是您要找的东西？检查片段，或这个jsfiddle(fiddle包含放大/缩小网格的按钮):body{background:url('http://testbed.nicon.nl/img/_FBs3b.svg')repeat

  9. javascript - 在 Angular.js 中有条件地显示链接 - 2

    基本上，我的模板中有这段代码:{{entry.school}}{{entry.school}}...如您所见，我试图在entry.url不为空时显示可点击的URL，否则显示纯文本。它工作正常，但看起来很丑陋。有没有更优雅的解决方案？我能想到的另一种方法是使用ng-if:{{entry.school}}{{entry.school}}但是我会重复几乎相同的比较两次，这看起来更糟。你们会如何处理这个问题？ 最佳答案 你可以试试。hellohello但是ngSwitch您正在使用的应该没问题。

  10. javascript - 如何从其他 Controller 关闭 Angular-ui 模式 - 2

    我正在使用Angular-ui弹出一个带有表单的模式。我的代码是:app.controller('NewCaseModalCtrl',['$http','$scope','$modal',function($http,$scope,$modal,$log){$scope.items=['item1','item2','item3'];$scope.open=function(size){varmodalInstance=$modal.open({templateUrl:'modal-new-case.html',controller:'ModalInstanceCtrl',size:s

随机推荐