vue中回调函数(callback)的用法举例

var doSomething = function(a,b){
 return a + b;
}
console.log(doSomething(2,3));

var fs = require("fs");
var c
function f(param) {
    console.log(param)
}
function writeFile() {
    fs.writeFile('input.txt', 'fs.writeFile 写入文件的内容', function (err) {
        if (!err) {
            console.log("文件写入完成")
            c = 1
        }
    });
}
c = 0
writeFile()
f(c)

var fs = require("fs");
var c
function f(param) {
    console.log(param)
}
function writeFile() { 
    fs.writeFile('input.txt', 'fs.writeFile 写入文件的内容', function (err) {
        if (!err) {
            console.log("文件写入完成")
            c = 1
            f(c)
        }
    });
}
c = 0
writeFile() 

var fs = require("fs");
function f(param) {
    console.log(param)
}
function writeFile(callback) { //callback，表示这个参数不是一个普通变量，而是一个函数
    fs.writeFile('input.txt', 'fs.writeFile 写入文件的内容', function (err) {
        if (!err) {
            console.log("文件写入完成")
            c = 1
            callback(c) // 因为我们传进来的函数名是f()，所以此行相当于调用一次f(c)
        }
    });
}
var c = 0
writeFile(f) // 函数f作为一个参数传进writeFile函数

var fs = require("fs");
function writeFile(callback) { 
    fs.writeFile('input.txt', '我是通过fs.writeFile 写入文件的内容', function (err) {
        if (!err) {
            console.log("文件写入完毕!")
            c = 1
            callback(c) 
        }
    });
}
var c = 0
writeFile(function (param) {
    console.log(param)
})

var doit = function(callback)
{
    var a = 1,
        b = 2,
        c = 3;
    var t = callback(a,b,c);
    return t + 10;
};
var d = doit(function(x,y,z){
    return (x+y+z);
});
console.log(d);
export default {
  created() {
    this.testCallBack();
  },
  methods: {
    testCallBack() {
      let param = '测试'
      this.myCallback(param, function (arg1, arg2) {
        alert('这是回调' + arg1 + ' ' + arg2)
      });
    },
    myCallback(param, callback) {
      setTimeout(() => {
        alert(param)
        callback(param, '222');
      }, 1000);
    }
  }
}
readImageFile(origin, quality, file) {
      let that = this;
      let fileName = file.name;
      let reader = new FileReader();
      reader.onload = function(evt) {
        let base64File = evt.target.result;
        that.imageCompress(
          base64File,
          origin,
          {
            quality
          },
          function(result) {
            let blobFile = that.dataURLtoBlob(result);
            let compressFile = new window.File([blobFile], fileName, { type: file.type });
            that.uploadFile(compressFile);
          }
        );
      };
      reader.readAsDataURL(file);
    },
    // 压缩图片
    imageCompress(path, Orientation, obj, callback) {
      let img = new Image();
      img.src = path;
      img.onload = function() {
        let that = this;
        // 默认按比例压缩
        let imgWidth = that.width;
        let imgHeight = that.height;
        let scale = imgWidth / imgHeight;
        if (imgWidth > MAX_IMAGE_WIDTH) {
          imgWidth = MAX_IMAGE_WIDTH;
          imgHeight = imgWidth / scale;
        }
        let quality = obj.quality || 0.7; // 默认图片质量为0.7
        // 生成canvas
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        let anw = document.createAttribute('width');
        let anh = document.createAttribute('height');
        anw.nodeValue = imgWidth;
        anh.nodeValue = imgHeight;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, imgWidth, imgHeight);
        // quality值越小，所绘制出的图像越模糊
        let base64 = canvas.toDataURL('image/jpeg', quality);
        // 回调函数返回base64的值
        callback(base64);
      };
    },
function doSomething(msg, callback){
    alert(msg);
    if(typeof callback == "function") 
    callback();
 } 
doSomething("回调函数", function(){
    alert("匿名函数实现回调!");
 }); 

var clientData = {
    id: 096545,
    fullName: "Not Set",
    //setUsrName是一个在clientData对象中的方法
    setUserName: function (firstName, lastName){
        this.fullName = firstName + " " + lastName;
    }
} 
function getUserInput(firstName, lastName, callback){
    //code .....
    //调用回调函数存储
    callback(firstName, lastName);
}
getUserInput("Barack","Obama",clientData.setUserName);
console.log(clientData.fullName);  //Not Set
console.log(window.fullName);  //Barack Obama

//注意到我们增加了新的参数作为回调对象，叫做“callbackObj”
function getUserInput(firstName, lastName, callback ,callbackObj){
         //code .....
        callback.apply(callbackObj, [firstName, lastName]);
}
getUserInput("Barack", "Obama", clientData.setUserName, clientData);
console.log(clientData.fullName); //Barack Obama

function fn(url, callback){
 var httpRequest;　　　　//创建XHR
 httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() :　　　//针对IE进行功能性检测
　　　　window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : undefined;
 httpRequest.onreadystatechange = function(){
  if(httpRequest.readystate === 4 && httpRequest.status === 200){　　//状态判断
   callback.call(httpRequest.responseXML); 
  }
 };
 httpRequest.open("GET", url);
 httpRequest.send();
}
fn("text.xml", function(){　　　　//调用函数
 console.log(this); 　　              / /此语句后输出
});
console.log("this will run before the above callback.");　　//此语句先输出