如何停止「的setInterval」當負載是裏面

Question

我因爲有同樣的問題： how to stop "setInterval"

，但是當我有setInterval的內部負載它不工作， 這裏面是什麼測試。 PHP：

<div id="refresh"> 
<textarea></textarea> 
</div> 


<script src="jquery.js"></script> 
<script> 
$(function() { 
    var timerId = 0; 

    $('textarea').focus(function() { 
    clearInterval(timerId); 
    }); 

    $('textarea').blur(function() { 
    timerId = setInterval(function() { 
    $('#refresh').load('test.php #refresh'); 
    }, 1000); 
    }); 
}); 
</script> 

Answer 1

的問題是，您的通話load破壞並重新創建textarea，並沒有什麼附加的事件處理程序的新textarea。您附加的處理程序只能附加到原始程序，而不是新的替換程序。

你可以通過事件委託來解決這個問題，因爲jQuery確保blur和focus泡泡（儘管它們本身不會在所有瀏覽器上冒泡）;

$(function() { 
    var timerId = 0; 

    $('#refresh').on('focus', 'textarea', function() { 
    clearInterval(timerId); 
    }); 

    $('#refresh').on('blur', 'textarea', function() { 
    timerId = setInterval(function() { 
    $('#refresh').load('test.php #refresh'); 
    }, 1000); 
    }); 
}); 

掛接的#refresh元素上的事件，但觸發只有當事件起源於它的後代textarea的處理程序。

或者因爲沒有理由被反覆查找refresh：

$(function() { 
    var timerId = 0, 
     refresh = $("#refresh"); 

    refresh.on('focus', 'textarea', function() { 
    clearInterval(timerId); 
    }); 

    refresh.on('blur', 'textarea', function() { 
    timerId = setInterval(function() { 
    refresh.load('test.php #refresh'); 
    }, 1000); 
    }); 
}); 

注意這一變化也意味着只有textarea元素中的#refreshdiv獲得的事件，而與你的原代碼，所有textarea頁面上的元素獲得了它。