2015-09-27 91 views
-2

我想延遲.keypress()方法在jQuery中的操作一段時間。JS按鍵延遲

我看着像解決方案:

function sleep(milliseconds) { 
    var start = new Date().getTime(); 
    for (var i = 0; i < 1e7; i++) { 
    if ((new Date().getTime() - start) > milliseconds){ 
     break; 
    } 
    } 
} 

setIntervalsetTimeout方法很好,但在第一變型中凍結entiry頁我真的不想做的事。在第二個我不知道如何將我的腳本包裝到這些功能。

我的代碼示例:

$(document).ready(function() { 
//some code 
    $(document).keypress(function(event){/*...this fragment I want to be freezed*/}); 
}); 

問題的解釋:

比方說,我有一個簡單的計數器,它在keypress事件處理計數多少次輸入按鈕被用戶按下。第三次點擊後,我希望頁面不會響應用戶按下5秒鐘而不凍結整個頁面(用戶仍然可以點擊某個<button>等等。但任何鍵盤上的按鍵都將不起作用,直到5秒左右(凍結keypress事件處理程序)。

+0

你的第一個代碼段是一個繁忙的循環 - 而它的等待延時過去就掛一個核心100%。你永遠不應該那樣做。四處尋找事件*限制*以獲得主要問題的答案。 –

+0

林不知道這是否會工作,但試試這個:'$(document).delay(5000).keypress(function(){};);' – Manu

+1

@Manu它不會工作。 – JJJ

回答

2

這裏的東西相當簡單

var delay = (function() { 
    var ticker = null; 

    return function(callback, ms) { 
     if (ticker !== null) { 
      clearTimeout(ticker) 
     } 

     ticker = setTimeout(callback, ms) 
    } 
}()) 

$(document).ready(function() { 
    // Pass delay two parameters, the first one is the callback 
    // You want to delay, the second is the time in milliseconds to wait 
    $(document).on("click", function() { 
     delay(function(){ ... }, 3000) 
    }); 
}); 

以下是如何使用這樣的示例:http://jsfiddle.net/p0tf8of0/8/

這裏是延遲功能的另一種變型中,這一個接受用於一定量的後延遲的第三參數調用。

var delay = (function() { 
    var ticker = null; 
    var invokedCounter = 0 

    return function(callback, ms, delayAfter) { 
     if (typeof delayAfter === "number" && delayAfter > 0 && delayAfter === invokedCounter) { 
      if (ticker !== null) { 
       clearTimeout(ticker) 
      } 

      ticker = setTimeout(callback, ms) 
     } else { 
      invokedCounter++ 
      callback() 
     } 
    } 
}()) 

例如:http://jsfiddle.net/p0tf8of0/12/

+0

我可以通過我的'keypress'處理有不知何故?當然你也可以的 –

+0

,那就是所有的想法。 –

+0

謝謝你的答案,但我怎麼能耽誤我的回調用戶點擊*只有當無*對於已經4次延遲? –

-1

使用debounce()從lodash或下劃線(公用JS庫)

防抖動允許觸發事件僅一次在定義的時段內的功能。

jQuery的( '#myDiv')。上('click',_.debounce(myFunction,300,{'leading':true,'trailing':false}));

+0

請詳細說明如何使用它。 – Manu

+0

去抖動只允許在定義的時間段內觸發一次事件。 (''click',_.debounce(myFunction,300,{ 'leading':true, 'trailing':false }));' –

+0

*(Downvotes不是我的但提示:您的最後一個註釋應該是你的答案的一部分,可能與什麼'防抖動()'實際上沒有更多的純文本信息* –