javaScript中的回调函数

Posted itly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

?

  

以上是关于javaScript中的回调函数的主要内容,如果未能解决你的问题,请参考以下文章

jquery中的回调函数怎么用

JavaScript中的回调函数

浅谈JavaScript中的异步处理

理解JavaScript中的回调函数

Javascript中的回调函数和匿名函数的回调

Javascript 中的回调函数和递归函数简单实际分析学习