• 回调函数 事件回调 异步事件 异步函数 JS事件流 事件的捕获模式


    回调函数

    回调函数是一种常见的编程概念,它是指将一个函数作为参数传递给另一个函数,并在特定的条件或事件发生时调用该函数

    回调函数的使用场景包括:

    1. 异步操作处理:在异步操作完成后执行回调函数来处理结果
      例如使用回调函数处理 Ajax 请求的响应数据
    function fetchData(url, callback) {
      // 发起异步请求
      // 在数据返回后执行回调函数处理数据
      // ...
    }
    
    function handleData(data) {
      // 处理返回的数据
    }
    
    fetchData("https://example.com/api", handleData);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    1. 事件处理:在事件触发时执行回调函数。例如,监听按钮点击事件
    var button = document.querySelector("#myButton");
    
    function handleClick(event) {
      // 处理按钮点击事件
    }
    
    button.addEventListener("click", handleClick);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    1. 接口实现:在实现某个接口或类时,传入的函数用作回调函数
    function processArray(array, callback) {
      // 遍历数组并对每个元素执行回调函数
      // ...
    }
    
    function logItem(item) {
      console.log(item);
    }
    
    var myArray = [1, 2, 3, 4, 5];
    processArray(myArray, logItem);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    回调函数的作用是将一个函数的执行权交给调用者,在特定的时机通过调用回调函数来完成相应的操作
    这种机制可以帮助实现代码的模块化、解耦和灵活性

    事件回调

    事件的回调是一种常见的编程模式,用于处理异步事件
    在事件驱动的编程中,当某个事件发生时,会触发相应的回调函数来处理事件的结果

    回调函数是一个作为参数传递给其他函数的函数,它会在特定的事件发生后被调用
    当需要处理异步操作时,可以将回调函数传递给异步函数,并在异步操作完成后调用回调函数

    通过回调函数,我们可以在异步操作完成后执行相应的逻辑,避免了阻塞程序的执行
    然而随着异步操作的嵌套和复杂性增加,回调地狱(Callback Hell)问题可能会出现,导致代码难以维护和理解
    为了解决这个问题,可以使用Promise、async/await等更高级的异步处理机制来简化异步代码的编写

    异步事件

    异步事件是指在程序执行过程中,某些操作会在后台或其他线程中运行,并且不会阻塞程序的执行
    相比于同步操作,异步操作允许程序在等待结果的同时继续执行其他任务

    常见的异步事件包括网络请求、文件读写、定时器和用户交互等
    这些事件通常需要花费较长时间来完成,或者需要等待外部资源的响应
    为了不阻塞主线程的执行,程序会在发起异步事件后立即继续向下执行,而不是等待事件完成

    在处理异步事件时,一种常见的模式是使用回调函数或Promise来处理异步操作的结果
    回调函数会在异步操作完成后被调用,以便处理获取到的数据或执行相应的逻辑
    而Promise是一种更为现代化的异步处理机制,它以链式调用的方式来处理异步操作的结果,并可以通过then和catch方法来处理成功和失败的情况

    通过使用异步事件处理机制,我们可以提高程序的响应性和并发性,使程序能够高效地处理多个异步任务,并在必要的时候合理地控制和管理这些异步事件

    异步函数

    异步函数(Async Function)是一种用于简化异步编程的特殊函数形式
    它使用 async 关键字来定义,并且在函数体内可以使用 await 关键字来等待异步操作的结果
    Async Function 的定义形式如下:

    async function functionName() {
      // 异步操作
      await someAsyncOperation();
      // 其他代码逻辑
      // ...
      return result;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在异步函数中,可以使用await关键字等待一个返回Promise的异步操作的完成,并暂停函数的执行直到获得异步操作的结果
    这样可以使代码看起来更像是同步的顺序执行,而不需要显式地处理 Promise 的 then/catch,以及回调函数的嵌套

    JS事件流

    JavaScript的事件流(Event Flow)是指浏览器处理事件的方式和顺序
    它描述了当事件发生时,从哪里开始触发事件,经过哪些阶段,最终到达哪个目标元素的过程

    JavaScript的事件流分为三个阶段:

    1. 事件捕获阶段(Capture phase):事件从最外层的父元素开始,逐级向内层元素捕获,直到目标元素。在捕获阶段中,事件的处理程序不会被执行
    2. 目标元素阶段(Target phase):事件到达目标元素,在目标元素上执行相应的事件处理程序。如果事件绑定了多个处理程序,它们的执行顺序取决于绑定的顺序
    3. 事件冒泡阶段(Bubbling phase):事件从目标元素开始向外层元素冒泡,逐级往上冒泡,直到最外层的父元素。在冒泡阶段中,事件的处理程序会依次执行

    通过了解和理解事件流,开发者可以更好地控制和利用事件的传播和处理过程,以达到更灵活和高效的事件交互效果

    事件的捕获模式

    事件的捕获模式指的是在事件流中,事件从最外层的父元素向内层元素逐级捕获的过程。在捕获模式下,事件首先从最外层的父元素开始捕获,然后逐级向内层元素传递,最终到达目标元素。

    可以通过addEventListener方法的第三个参数来指定事件的捕获模式。当该参数为true时,表示采用捕获模式;当该参数为false时,表示采用默认的冒泡模式。

    使用捕获模式的场景相对较少,大多数情况下我们使用默认的冒泡模式来处理事件。但是,在某些特定的场景下,如在事件到达目标元素之前截获事件或实现更细粒度的事件处理,捕获模式可以发挥作用。

    值得注意的是,大部分DOM事件默认使用冒泡模式,而不是捕获模式。 若要在元素上设置事件捕获模式,需要显式地将addEventListener的第三个参数设置为true。

    总结起来,事件的捕获模式是事件流中的一种方式,指的是事件从最外层的父元素向内层元素逐级捕获的过程。通过addEventListener的第三个参数来指定事件的捕获模式。

  • 相关阅读:
    react-router 源码及原理解析 v5版本
    js实现贪吃蛇游戏
    详解 Spark 核心编程之累加器
    AndroidApp学习笔记
    Shiro之缓存管理
    Spring boot实现Activemq死信队列
    算法day42|背包问题
    1225. 报告系统状态的连续日期
    优雅的springboot参数校验(一)
    拿到第一个用户并提权
  • 原文地址:https://blog.csdn.net/m0_62629457/article/details/132781332