回调函数

xiaoxiao2021-03-25 58

回调函数(就是一个名字)

原理:函数可以作为参数传递函数也是一种数据类型特殊在可以加()执行 .

作用:当自身执行完还想在执行另一个函数使用回调函数

可以有也可以没有

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content=" "> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decoration: none;} ul,li{list-style: none;} body{font-size: 14px;font-family: "微软雅黑";} #box{width: 100px;height: 100px;background: red;margin: 20px auto;} </style> </head> <body> <div id="box">点我</div> <script type="text/javascript"> /* 回调函数(就是一个名字) 原理:函数可以作为参数传递函数也是一种数据类型特殊在可以()执行作用:当一个函数执行完还想在执行另一个函数可以有也可以没有 */ //弹出1,再弹出2====>当一个函数执行完在执行另一个函数 function fn(callBack){ alert(1); if(callBack)callBack(); } fn(function(){alert(2)}); var a = 7; function play(callBack){ var timer = setInterval(function(){ a--; document.title = a; },1000); if(a==1){ clearInterval(timer); callBack&&callBack(); }; } play(function(){ alert("回调函数") }); function clickMe(id,callBack){ var box = document.getElementById(id); box.onclick = function(){ callBack && callBack(this);//一样的意思 if(callBack)callBack(); } } //如果要改的话, 这样就不用写两个函数; clickMe("box",function(this){ this.style.height = "200px"; this.style.width = "100px"; }) /*function fn1(id){ var box = document.getElementById(id); a.style.width = "200px;" a.style.height = "200px;" } function fn2(id){ var box = document.getElementById(id); a.style.width = "200px;" } */ </script> </body> </html>

例子

当同一个函数客户要求的效果不同时,不用在一个函数改来改去,要那个效果就在回调函数写那个. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content=" "> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decoration: none;} ul,li{list-style: none;} body{font-size: 14px;font-family: "微软雅黑";} div{width: 100px;height: 100px;background: red;margin: 10px auto;text-align: center;line-height: 100px;} </style> </head> <body> <div id="box1">点我</div> <div id="box2">点我</div> <div id="box3">点我</div> <script type="text/javascript"> var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var box3 = document.getElementById("box3"); // box1.onclick = function(){ // this.style.width = "150px"; // this.style.height = "150px"; // this.style.background = "green"; // }; //效果1 clickMe("box1",function(a){ a.style.width = "150px"; }); //效果2 clickMe("box2",function(a){ a.style.height = "200px"; a.style.background = "yellow"; a.style.lineHeight = "200px"; }); //效果3 clickMe("box3",function(a){ window.location.href = "http://www.baidu.com"; }); //封装下 function clickMe(elemnt,callBack){ var boxDom = document.getElementById(elemnt); boxDom.onclick = function(){ //if(callBack)callBack(this); callBack && callBack(this); }; } </script> </body> </html>

处理数据例子

转载请注明原文地址: https://ju.6miu.com/read-38153.html

技术

最新回复(0)