- 詳細內容
- 分類: Javascript
- 點擊數: 474
終極解決Javascript非同步
異步操作是JavaScript編程的麻煩事，麻煩到一直有人提出各種各樣的方案，試圖解決這個問題。
從最早的回調函數，到Promise對象，再到Generator函數，每次都有所改進，但又讓人覺得不徹底。它們都有額外的複雜性，都需要理解抽象的底層運行機制。
異步I / O不就是讀取一個文件嗎，幹嘛要搞得這麼複雜？異步編程的最高境界，就是根本不用關心它是不是異步。
async函數就是隧道盡頭的亮光，很多人認為它是異步操作的終極解決方案。
異步函數是什麼？
一句話，async函數就是Generator函數的語法糖。
前文有一個Generator函數，依次讀取兩個文件。
var fs = require('fs');
var readFile = function (fileName){
return new Promise(function (resolve, reject){
fs.readFile(fileName, function(error, data){
if (error) reject(error);
resolve(data);
});
});
};
var gen = function* (){
var f1 = yield readFile('/etc/fstab');
var f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};- 詳細內容
- 分類: Javascript
- 點擊數: 920
filter函數特性：
遍歷每個元素，回傳 true 時，目前的值會保留在陣列內，這會回傳一個新陣列，而不是修改原本的陣列。
原理
當input輸入文字時觸發onChenge事件，event.target.value值存入this.state.search，再利用this.state.search使用filter()回圈過濾data內的資料。
- 詳細內容
- 分類: Javascript
- 點擊數: 1407
使用update()函數經過AJAX方法更新表單。
var ajaxCallLiveSubs = function(){
// endopoint
var url = 'https://jsonplaceholder.typicode.com/posts/1';
var interval = 5000;
var time = 0;
// Live Subs Charts
var ctx_live = document.getElementById("myChart");
var liveChart = new Chart(ctx_live, {
type: 'line',
data: {
labels: [],
datasets: [{
data: [],
borderWidth: 1,
borderColor:'#00c0ef',
label: 'liveCount',
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
}]
}
}
});
var doAjax = function() {
$.ajax({
url: url,
success: function(){
var currentTime = ++time
var currentValue = Math.random()*1000;
liveChart.data.labels.push(currentTime);
liveChart.data.datasets[0].data.push(currentValue);
liveChart.update();
},
complete: function () {
// Schedule the next
setTimeout(doAjax, interval);
}
});
};
doAjax();
};
ajaxCallLiveSubs();- 詳細內容
- 分類: Javascript
- 點擊數: 876
callback()
回調函數是一個作為參數傳遞給另一個函數的函數，然後在外部函數中調用該函數來完成某種例程或動作。
callback()簡單的例子：
function greeting(name) {
alert('Hello ' + name);
}
function processUserInput(callback) {
var name = prompt('Please enter your name.');
callback(name);
}
processUserInput(greeting);上面的例子是一個同步回調，因為它立即執行。
- 詳細內容
- 分類: Javascript
- 點擊數: 576
this.props.history.push
在導航時，您可以將傳遞道具傳遞給歷史對象
this.props.history.push({
pathname: '/template',
search: '?query=abc',
state: { detail: response.data }
})