javaScript中的回调函数
生活随笔
收集整理的這篇文章主要介紹了
javaScript中的回调函数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js回調函數</title>
</head>
<body>
<script>/*回調函數:一個函數當做參數傳遞給另外一個函數,這個被傳遞的函數就是回調函數*//*1.最基本的回調函數*//***************************************/function funA() {console.log("我是函數funA");}function funB(callback) {console.log("我是函數funB");/*當用戶傳入了回調函數,就執行這個回調函數*/callback && callback();}/*調用回調函數*/funB(funA);/*在這里回調函數funA作為參數,傳入funB函數中,funA函數在funB中執行了*///我是函數funB//我是函數funA/*************************************************//*2.匿名回調函數*/function funC(callback) {callback && callback();}/*調用函數funC,即funC(callback),傳入一個匿名函數*/func(function () {console.log("我是一個匿名的回調函數");})/*******************回調函數的一個應用************************//** 1.這是移動端首頁輪播圖,具有自動輪播及手觸摸左滑右滑功能* 2.在左滑,右滑的時候需要停止自動輪播的計時器,在左滑右滑執行完畢后,在添加自動輪播的定時器* 3.將輪播圖頁面移動封裝為一個imgMove(callback)的方法** *//*輪播圖滑動的imgMove(callback)方法*/function imgMove(callback) {$ul.animate({transform: "translateX(" + (-bannerWidth * index) + "px)"}, 200, "ease", function () {if (index >= 9) {index = 1;$(this).css({transform: "translateX(" + (-bannerWidth * index) + "px)"});} else if (index <= 0) {index = 8;$(this).css({transform: "translateX(" + (-bannerWidth * index) + "px)"});}/*小圓點隨著輪播圖改變樣式*/$pointLis.removeClass("current").eq(index - 1).addClass("current");/*如果傳入了回調函數,說明執行了左滑或者右滑,回調函數重新添加定時器*/callback && callback();});}/*定時器,輪播圖自動輪播,正常調用imgMove()不傳入回調函數*/var timer = setInterval(function () {index++;imgMove();}, 1000);/*手指觸摸左滑,在滑動時需要清除定時器即停止自動輪播功能,在畫完完成后通過回調函數重新添加定時器*/$ul.on("swipeLeft", function () {/*滑動前清除定時器*/clearInterval(timer);index++;/*在滑動結束后添加定時器*/imgMove(function () {timer = setInterval(function () {index++;imgMove();}, 1000);});});/*手指觸摸右滑*/$ul.on("swipeRight", function () {clearInterval(timer);index--;imgMove(function () {clearInterval(timer);timer = setInterval(function () {index++;imgMove();}, 1000);});});
</script>
</body>
</html>?
轉載于:https://www.cnblogs.com/itlyh/p/6045813.html
總結
以上是生活随笔為你收集整理的javaScript中的回调函数的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: markdown常见问题
- 下一篇: 简易正则表达式引擎源码阅读