仅在页面加载时刷新元素，并调用javascript、jquery、ajax中的函数

Question

我只想在页面加载时以及在另一个函数(如on click a button(上调用#taskdiv时更新它。但在我的代码中，由于setInterval()函数，它不断刷新div。

这是我的代码

// FETCH ALL TASKS
$(function() {
$.ajax({
url: '<?php echo base_url() ?>alltasks',
data: 'get',
success: function(data) {
$("#tasks").append(data);
}
})
});       

// REFRESH THE TASK AREA EVERY 2S
$(setInterval(function() {
$('#task').load("<?php echo base_url() ?>alltasks");
}, 2000))

提前感谢

Answer 1

HTML

<div id="tasks"></div>
<button onclick="readTasks()">Read Tasks</button>

Javascript

function readTasks(){
$('#task').load("<?php echo base_url() ?>alltasks");
}
$(document).ready(function(){
readTasks();
});

确保在页脚处加载Javascript。