按鍵延遲，如何限制只執行一次函數調用？

我正在設置一個表單來查找或在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

按鍵延遲，如何限制只執行一次函數調用？

回答

相關問題