按键延迟，如何限制只执行一次函数调用？

我正在设置一个表单来查找或在Web应用程序中创建新的城市记录。我需要城市的文本字段进行以下操作：按键延迟，如何限制只执行一次函数调用？

接收到文本输入后，显示一个“微调器”，指示计算机正在处理输入。
用户停止键入1秒后，发送ajax请求以检查输入。
回应状态（输入是否有效）。

我有这个几乎工作，但我有一个主要问题：我写的延迟脚本的作品，但延迟结束后，它运行的延迟期间发生的每个keyup一次函数的其余部分。我希望它只运行一次。这里是我正在使用的代码（控制台日志事件将与其他功能来代替以后调用）：

$(function() { 
    locationSelector.initialize(); 
}); 

var locationSelector = { 

    initialize: function() { 
    locationSelector.bindCityName $('input#city_name') 
    }, 

    city: { 
    status: function(status) { 
     console.log("Status message: " + status); 
    }, 
    error: function(message) { 
     console.log("Error message: " + message); 
    } 
    }, 

    bindCityName: function(selector) { 
    selector.on('keyup', function() { 
     locationSelector.city.status('loading'); 
     var timer = null; 
     if(timer) { 
     window.clearTimeout(timer); 
     } 
     timer = window.setTimeout(
     function() { locationSelector.getCity(selector); }, 
     1000 
    ); 
    }); 
    }, 

    getCity: function(selector) { 
    if(selector.val() == "") { 
     locationSelector.city.error('Cannot be blank.'); 
    } else { 
     console.log("AJAX REQUEST"); 
    } 
    } 
};

为什么getCity功能被每一次KEYUP运行，我该怎么解决呢？另外，说实话，我是一个JavaScript新手，所以我会很感激任何其他建议，如何改善这个代码脚手架。

谢谢！

来源

2012-04-14 Andrew

jfriend and dbaseman，谢谢你的回答。既然你们都给出了基本相同的答案，我已经选择了dbaseman，因为他早已过了1分钟，而且代表人数大大减少了。 Upvote因为他们都有帮助。谢谢！ – Andrew 2012-04-15 00:35:18

它看起来像这个问题是在这里：

var timer = null; 
if(timer) { 
    window.clearTimeout(timer); 
}

定时器被设置为空，所以它永远不会被清除。我建议在顶部初始化上面声明计时器，然后在清除它之后或者在执行之后将其设置为空。

来源

2012-04-14 23:51:21 McGarnagle

总共有js newb问题，但是如果语法看起来像是将它移动并保存在'locationSelector'中？我是否需要将它设置为一个键并将其称为'locationSelector.timer'，或者...我是否完全错误？ – Andrew 2012-04-15 00:06:50

不，只要“定时器”工作，只要你在一个嵌套块，就像你一样。在我看来很好。 – McGarnagle 2012-04-15 00:14:12

对于初学者，timer的变量声明需要处于从一个关键事件持续到下一个关键事件的范围内。实际上，它是一个局部变量，可以在每个关键事件中从头开始重新创建，因此您可以同时执行多个定时器。

移动这样的：

var timer = null;

全局范围或从一个关键事件到下仍然存在较高的范围。如果你愿意，也可以定义定时器变量位置选择的属性：

var locationSelector = { 
// other properties defined here 
    timer: null 
}

然后，你可以称其为locationSelector.timer。我还建议，当你的计时器实际触发时，你应该设置locationSelector.timer = null，因为定时器不再有效。

它也看起来像你需要清除'loading'状态，一旦你运行ajax。

而且，你的计时器设置为2秒，但你说你想等1秒钟不打字。

来源

2012-04-14 23:50:26 jfriend00

Re 2秒，这是我的错字，感谢您的支持！我已编辑修复。 – Andrew 2012-04-15 00:03:10

@Andrew - FYI，我在我的答案中增加了另一个选项，它将'timer'定义为'locationSelector'对象的属性。 – jfriend00 2012-04-15 00:11:11

按键延迟，如何限制只执行一次函数调用？

回答

相关问题