如何setInterval準備就緒，在textarea焦點停止，然後開始在textarea焦點？

我有一個社交流，我想更新setInterval。當某人離開評論或回覆時，需要停止SetInterval，否則它將清除textarea的內容，因爲它嵌套在正在更新的內容中。如何setInterval準備就緒，在textarea焦點停止，然後開始在textarea焦點？

我試圖從另一個答案使用此代碼，修改，但它是失敗的，它不會停止setInterval計時器的第一個週期後的計時器。

HTML ...

<div id="social_stream_content"> 
    <textarea id="comments" rows="4" cols="50" placeholder="Set focus to stop timer"></textarea> 
</div>

JS ...

function auto_load(){ 
       data = '<textarea id="comments" rows="4" cols="50" placeholder="Set focus to stop timer..."></textarea>'; 
     $("#social_stream_content").html(data); 
     alert("auto_load invoked"); 
} 

var myInterval; 
var interval_delay = 10000; 
var is_interval_running = false; //Optional 

$(document).ready(function(){ 
    auto_load(); //Call auto_load() function when document is Ready 

    //Refresh auto_load() function after 10000 milliseconds 
    myInterval = setInterval(interval_function, interval_delay); 

    $('textarea').focus(function() { 
     console.log('focus'); 
     clearInterval(myInterval); // Clearing interval on window blur 
     is_interval_running = false; //Optional 
    }).focusout(function() { 
     console.log('focusout'); 
     clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
     if (!is_interval_running) //Optional 
      myInterval = setInterval(interval_function, interval_delay); 
    }); 
}); 

interval_function = function() { 
    is_interval_running = true; //Optional 
    // Code running while textarea is NOT in focus 
    auto_load(); 
}

編輯：我已經更新了代碼，包括一切作爲的jsfiddle測試。如果在文檔準備就緒後關閉警報後立即將焦點置於註釋textarea，計時器將停止。

取消焦點後，間隔計時器的第一個週期結束後，計時器不會再次停止。焦點事件似乎停止發射。

這是因爲評論textarea嵌套在正在更新的內容區域內嗎？我正在拉我的頭髮。如果我刪除嵌套，它會按預期工作。

我需要注意的就是註釋文字區域總是會被嵌套在社會流的內容div中，出於顯而易見的原因。

因此，要進一步更新的問題：有沒有辦法讓間隔計時器停止對使用jquery textarea的焦點，而聚焦元素嵌套在更新元素裏面？爲什麼在第一個時間間隔完成後焦點事件停止觸發？

編輯：完整的JS代碼，coreectly工作，與傑里米Klukan的解決方案結合，爲任何人做同樣類型的項目。

工作JS：

function auto_load(){ 
    data = '<textarea id="comments" rows="4" cols="50" placeholder="Set focus to stop timer..."></textarea>'; 
    $("#social_stream_content").html(data); 
    alert("auto_load invoked"); 
} 

var myInterval; 
var interval_delay = 10000; 
var is_interval_running = false; //Optional 

$(document).ready(function(){ 
    auto_load(); //Call auto_load() function when document is Ready 

    //Refresh auto_load() function after 10000 milliseconds 
    myInterval = setInterval(interval_function, interval_delay); 

    $('body').on('focus', '#social_stream_content textarea', function (event) { 
     console.log('focus'); 
     clearInterval(myInterval); // Clearing interval on window blur 
     is_interval_running = false; //Optional 
    }).on('focusout', '#social_stream_content textarea', function(event) { 
     console.log('focusout'); 
     clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
     if (!is_interval_running) //Optional 
      myInterval = setInterval(interval_function, interval_delay); 
    }); 
}); 

interval_function = function() { 
    is_interval_running = true; //Optional 
    // Code running while textarea is NOT in focus 
    auto_load(); 
}

來源

2016-08-04 Ethan Aaron Vandal

鏈接到JSfiddle，我測試... https://jsfiddle.net/a60nj1pf/ –

焦點事件停止工作，因爲當間隔函數觸發時，它將替換包含它的DIV的內容，以便3210不再存在。

而是執行此操作：

$('body').on('focus', '#social_stream_content textarea', function (event) { 
 
    // Focus handler 
 
}).on('focusout', '#social_stream_content textarea', function(event) { 
 
    // Focusout handler 
 
});

這將捕獲所有焦點和事件的內容匹配選擇「#social_stream_content textarea的」，而不直接連接到任何對象的事件。

來源

2016-08-04 22:03:47

謝謝你保存@Jeremy Klukan！這工作完美。 –

您可以檢測對焦和模糊使用addEventListener（事件：焦點和模糊）一textarea。

您可以使用clearInterval()結束setInterval()傳遞intervalID。

下面示出的主（以香草的JavaScript）一個簡單的工作示例。

基本上：

當頁面加載定時器啓動。
當用戶對焦textarea計時器停止。
當用戶模糊textarea計時器重新開始。

文檔：

WindowTimers.clearInterval()

WindowTimers.setInterval()

您也可以找到感興趣的Document.activeElement。

window.app = { 
 
    timerRef: null, 
 
    timerStart: function() { 
 
    this.timerRef = setInterval(function() { 
 
     //alert("Hello"); 
 
     console.log('refresh stream'); 
 
    }, 2000); 
 
    }, 
 
    timerStop:function(){ 
 
     clearInterval(this.timerRef); 
 
    }, 
 
    txtAreaListenFocus: function() { 
 
    var txtArea = document.getElementById('txtArea'); 
 
    txtArea.addEventListener('focus', function(event) { 
 
     this.timerStop(); 
 
     console.log('focus'); 
 
    }.bind(this)); 
 
    }, 
 
    txtAreaListenBlur: function() { 
 
    var txtArea = document.getElementById('txtArea'); 
 
    txtArea.addEventListener('blur', function(event) { 
 
     this.timerStart(); 
 
     console.log('blur'); 
 
    }.bind(this)); 
 
    }, 
 
    start: function() { 
 
    this.timerStart(); 
 
    this.txtAreaListenFocus(); 
 
    this.txtAreaListenBlur(); 
 
    } 
 

 
}; 
 

 
window.app.start();

<textarea id="txtArea" rows="4" cols="50"> 
 
    Some content here 
 
</textarea>

下面

jQuery的版本。您可以使用.focusout()和.focusin()：

$(document).ready(function(){ 
 
window.app = { 
 
    timerRef: null, 
 
    timerStart: function() { 
 
    this.timerRef = setInterval(function() { 
 
     //alert("Hello"); 
 
     console.log('refresh stream'); 
 
    }, 2000); 
 
    }, 
 
    timerStop:function(){ 
 
     clearInterval(this.timerRef); 
 
    }, 
 
    txtAreaListenFocus: function() { 
 
    $('#txtArea').focusin(function(event) { 
 
     this.timerStop(); 
 
     console.log('focus'); 
 
    }.bind(this)); 
 
    }, 
 
    txtAreaListenBlur: function() { 
 
    $('#txtArea').focusout(function(event) { 
 
     this.timerStart(); 
 
     console.log('blur'); 
 
    }.bind(this)); 
 
    }, 
 
    start: function() { 
 
    this.timerStart(); 
 
    this.txtAreaListenFocus(); 
 
    this.txtAreaListenBlur(); 
 
    } 
 

 
}; 
 

 
window.app.start(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="txtArea" rows="4" cols="50"> 
 
    Some content here 
 
</textarea>

關於具體的代碼有問題，我解決它在下面的工作示例。

$(document).ready(function() { 
 
    var myInterval; 
 
    var interval_delay = 1000; 
 
    var is_interval_running = false; //Optional 
 
    var interval_function = function() { 
 
is_interval_running = true; //Optional 
 
console.log('refresh stream'); 
 
// Code running while comment textarea is not in focus 
 
//auto_load(); 
 
    }; 
 

 
    //auto_load(); //Call auto_load() function when DOM is Ready 
 

 
    //Refresh auto_load() function after 1000 milliseconds 
 
    myInterval = setInterval(interval_function, interval_delay); 
 

 
    $('#textarea').focus(function() { 
 
clearInterval(myInterval); // Clearing interval on window blur 
 
is_interval_running = false; //Optional 
 
    }).focusout(function() { 
 
clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
 
if (!is_interval_running) //Optional 
 
    myInterval = setInterval(interval_function, interval_delay); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="textarea" rows="4" cols="50"> 
 
    Some content here 
 
</textarea>

來源

2016-08-04 06:39:12 GibboK

雖然這個答案的工作原理，我一直在尋找一個jQuery的解決方案。我更新了我的問題，以便更清楚。我不明白爲什麼我的原始代碼不停止計時器。 –

@EthanAaronVandal我已經添加了我的答案與jQuery版本的代碼。如果您發現我的答案有用，請不要忘記使用左側的「箭頭」或「打勾」圖標進行投票或接受我的答案:)感謝您的合作:) – GibboK

@EthanAaronVandal我也編輯我的回答包括對您的代碼的可能修復。我已經從你的代碼中註釋了'auto_load'函數，因爲函數沒有在你的示例中提供，我也改變了延遲時間，所以你可以快速測試腳本。我希望你發現它很有用:) – GibboK

我的解決辦法：d

HTML：

<div id="social_stream_content"></div>

的jQuery：

var myInterval; 
var interval_delay = 1000; 
var is_interval_running = false; //Optional 

$(document).ready(function(){ 
    data = '<textarea id="comments" rows="4" cols="50" placeholder="Set focus to stop timer..."></textarea>'; 
    $(data).appendTo("#social_stream_content"); 

    //Refresh auto_load() function after 10000 milliseconds 
    var myInterval = setInterval(interval_function, interval_delay); 

    $('#comments').focus(function() { 
     console.log('focus'); 
     clearInterval(myInterval); // Clearing interval on window blur 
     is_interval_running = false; //Optional 
    }).focusout(function() { 
     console.log('focusout'); 
     clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
     if (!is_interval_running) //Optional 
      myInterval = setInterval(interval_function, interval_delay); 
    }); 
}); 

interval_function = function() { 
    is_interval_running = true; //Optional 
    // Code running while textarea is NOT in focus 
    $("#comments").val(""); 
    console.log("loop"); 
}

希望它能幫助。

來源

2016-08-04 21:32:06

如何setInterval準備就緒，在textarea焦點停止，然後開始在textarea焦點？

回答

相關問題