等待用户停止输入后执行函数

10 浏览
0 Comments

等待用户停止输入后执行函数

我有用户在输入时进行ajax调用。问题是它会在每输入一个字母时发起一次调用,所以我设置了一个延时器:

$(input).live('keyup', function(e){
setTimeout(function(){ 
var xx = $(input).val();
doSearch(xx); 
}, 400); 
}); 

它确实会等待400毫秒,但然后在每次键盘松开时都执行一次。我该如何改变这个设置,使得ajax调用只在最后一个字母输入后的约400毫秒内执行一次?

(我以前用过'delay',但它对我的脚本完全不起作用...)

0
0 Comments

问题的出现原因:在这段代码中,当用户键入内容时,会触发keyup事件。然后,会进行一系列操作,包括执行doSearch函数和将outRunningAJob类添加到input元素中。然后,使用delay方法延迟400毫秒,在延迟结束后,将outRunningAJob类从input元素中移除。然而,这种方法可能存在问题,因为如果用户在400毫秒内继续键入,那么delay方法将被重置,导致问题。

解决方法:一种解决方法是使用timeout函数,而不是delay方法。timeout函数可以在指定的时间间隔后执行代码,这样就可以避免delay方法被重置的问题。下面是使用timeout函数来实现这个功能的代码示例:

var typingTimer;
var doneTypingInterval = 400;
$(input).live('keyup', function(e) {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function() {
        var xx = $(input).val();
        doSearch(xx);
    }, doneTypingInterval);
});

在这个示例中,我们使用了一个typingTimer变量来存储setTimeout函数的返回值。每当用户键入时,我们都会清除之前设置的timeout,然后设置一个新的timeout来执行doSearch函数。这样,如果用户在400毫秒内继续键入,之前设置的timeout将被清除,从而避免问题的发生。

通过使用timeout函数,我们可以更好地控制代码的执行,并避免出现问题。这种方法在维护性方面也更好,因为它更直观地表达了我们的意图。

0
0 Comments

问题原因:用户在输入框中输入时,需要等待用户停止输入才执行函数。但是由于每次按键都会重新设置定时器,导致函数被频繁调用,无法实现等待用户停止输入的效果。

解决方法:通过在每次按键触发时重新设置定时器,等待用户停止输入后再执行函数。可以使用以下代码实现:

(function() {
    var timer = null;
    $(input).on('keyup', function(e) {
        clearTimeout(timer);
        timer = setTimeout(..., 400);
    });
    $(input).on('keydown', function(e) {
        clearTimeout(timer);
    });
})();

上述代码中,通过使用函数表达式确保`timer`变量的作用域仅限于需要使用它的两个函数中。另外,根据jQuery版本的不同,可以将`.live('keyup', ...)`替换为`.on('keyup', ...)`方法。

尽管可能需要一些额外的修改,但以上代码是对原始代码进行最小改动的解决方案。

0
0 Comments

在上述代码中,出现了一个问题:当用户停止输入时,等待一段时间再执行函数。这个问题可能会导致一些不必要的性能问题和不平滑的用户体验。解决这个问题的方法是将函数移到一个命名函数中,然后在每次按键时调用它。

代码中的timer变量被用来记录一个延迟执行的定时器。在每次keyup事件发生时,会先检查timer变量。如果timer已存在,则使用clearTimeout方法将其清除。然后重新设置一个新的timer,延迟400毫秒后执行函数mySearch。这样做的目的是为了在用户连续输入时,等待一段时间再执行搜索操作,以提高性能和用户体验。

然而,这种实现方式存在一些问题。首先,每次keyup事件都会创建一个新的匿名函数,这是不必要的并且相对昂贵的操作。其次,如果用户按下一个键并释放,然后再按下另一个键,会发生什么?这种情况下,原来的timer尚未执行完毕,新的timer又被设置了,这可能导致函数被多次执行。

为了解决这些问题,建议将函数mySearch移动到一个命名函数中,并在每次keyup事件触发时调用它。这样可以避免创建多个匿名函数,并确保每次按键只设置一个timer。此外,可以将timer清除的操作放在keydown事件中,而不是每次keyup事件中。这样可以避免在新的timer被设置之前,原来的timer还未执行完毕的情况。

总结起来,优化这段代码的方法是将函数移到一个命名函数中,并在每次keyup事件中调用它。同时,在keydown事件中清除timer,以确保每次按键只设置一个timer。这样可以提高性能和用户体验,避免不必要的函数执行和延迟。

0