异步执行 BOM操作（弹窗操作，获取浏览器滚动条高度）

最新推荐文章于 2024-01-21 22:14:57 发布

Allen·赵

最新推荐文章于 2024-01-21 22:14:57 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/108920676

js 专栏收录该内容

59 篇文章

订阅专栏

本文详细介绍了JavaScript中的同步执行与异步执行概念，强调异步执行在所有同步程序结束后才开始，并通过setInterval和setTimeout等实例说明异步程序的执行顺序。同时，讲解了浏览器的BOM操作，包括alert、prompt和confirm，以及如何获取和设置滚动条位置。此外，通过示例展示了如何根据滚动条位置显示或隐藏页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

异步执行

/*
所谓的异步执行

        计算机程序执行分为同步执行,和异步执行

        所谓的同步执行,就是正常的计算机程序执行的3大顺序流程
            顺序控制语句  从上至下,从左至右
            分支控制语句  if,switch
            循环控制语句  for,while,do...while,for...in,forEach()

        所谓的异步执行,是一种特殊的程序的执行方式
            setInterval  setTimeout
            事件的绑定 onclick...
            ajax请求  

        所谓异步程序的执行
            1,所有的异步程序的执行,都会在同步程序执行结束之后,再来执行
            2,异步程序的执行顺序,如果时间相同,看代码的先后顺序
                                如果时间不同,时间短的,先执行

        描述异步程序执行的过程
            1,从一行代码开始执行程序
            2,同步程序正常执行
            3,如果发现是异步程序,暂时不执行
              存储在异步池中,等待执行
            4,将程序中所有的同步程序执行完毕后
            5,开启异步池,执行异步程序
                当设定的时间到达,就会执行对应的异步升序
                先到设定时间的异步程序,先执行
                如果设定的时间相同,看异步程序的顺序,来执行

        必须要牢记,异步程序的执行,一定是在所有同步程序执行结束之后,才会开始执行
    
    */
    setInterval(function(){
        console.log('我是异步执行的程序1111');
    } , 2000);
    setInterval(function(){
        console.log('我是异步执行的程序2222');
    } , 1000);
    console.log('我是同步执行的程序')

BOM 操作

// 浏览器三大弹窗操作

    // 1,提示框 / 警告框
    // window.alert('弹出内容\n警告内容');

    // 转义符
    // 类似于 HTML中的 字符实体 是为了解决 输入内容和JavaScript代码的冲突

    // 例如,要在弹框中,实现换行
    /*

    \n	换行
    \'	单引号
    \"	双引号

    \r	回车
    \t	横向跳格 (Ctrl-I)
    \\	反斜杠
    \f	纵向的间隔

    注意:各个浏览器对转移符的支持效果不同,执行效果也不一样
         我们只要记住前三个就可以了

    */


    // 2,输入框 
    // 作用: window.prompt('提示内容');
    // 弹出一个输入框,可以输入数据,()中定义的内容,作为输入数据的提示内容
    // 输入框执行结果,可以使用变量来存储
    // 存储的内容,是数据的数据内容

    // 问题: 输入的数据,存储的方式是,字符串类型
    // 如果是输入数值,需要计算,必须把数据类型转化为数值

    // var userName = window.prompt('请输入账号');
    // var userPwd = window.prompt('请输入密码');

    // console.log(userName,userPwd);

    // 将 纯数字的 字符串 转化为数值类型方法
    
    // 方法1 : parseInt()    获取整数部分
    // var res1 = parseInt(window.prompt('请输入密码'));
    // console.log(res1);


    // 方法2 : 执行非 加法的 不影响数值的 运算
    // var res2 = window.prompt('请输入密码') - 0 ;
    // var res2 = window.prompt('请输入密码') * 1 ;
    // var res2 = window.prompt('请输入密码') / 1 ;
    // console.log(res2);

    // 方法3 : 在数值前,添加 + 正号 / - 符号
    // 获取 正数 的部分
    // 但是要注意,正数和负数的问题
    // + 正号 : 正数获取的正数结果   负数获取的是负数结果
    // - 符号 : 正数获取的负数结果   负数获取的是正数结果
    // var res2 = -window.prompt('请输入密码');
    // console.log(res2);



    // 3,确认框
    // 作用: window.confirm('提示内容');
    //       点击确定按钮,window.confirm()执行结果,返回值是 true
    //       点击取消按钮,window.confirm()执行结果,返回值是 false
    // 可以根据,返回值,执行不同的操作
    var res = window.confirm('请问您是否确定删除这个邮件');
    console.log(res);

// 获取浏览器滚动条高度

    // 获取浏览器滚动条,分为宽度和高度两个属性
    
    // 获取浏览器滚动条的高度,宽度

    // 获取高度的兼容性
    // 有没有 文档类型声明   <!DOCTYPE html>
    // 有   : document.documentElement.scrollTop;
    // 没有 : document.body.scrollTop;
    // 如果获取方式错误,程序不会报错,只是获取的结果是0

    // var height1 = document.documentElement.scrollTop;
    // var height2 = document.body.scrollTop;
    // console.log(height1 , height2);

    // 实际当中要确保,始终可以获取到正确的数值,不管有没有文档类型声明
    // 做 兼容处理 
    // var 变量 = 方式1 || 方式2 ;
    // 当方式1有结果时,数值会转化为 true , 方式2,就不会执行
    //        变量中存储的是方式1,获取的结果
    // 当方式1结果是0时,数值会转化为 false , 方式2会执行
    //        变量中,先存储方式1的结果0,再存储方式2的结果,最终为方位2的结果

    // 最终的效果,就是确保变量中,始终有数值存储,

    // console.log(document.documentElement.scrollTop);
    // console.log(document.body.scrollTop);

    // 浏览器上卷的高度
    // var height = document.documentElement.scrollTop || document.body.scrollTop

    // 浏览器移动的宽度
    // var width = document.documentElement.scrollLeft || document.body.scrollLeft;

    // console.log(height , width);


    // 还可以利用属性来设定

    // 设定滚动条,移动的宽度和高度
    // 直接设定数值就可以,不要加PX
    document.documentElement.scrollTop = 500;
    document.documentElement.scrollLeft = 500;

浏览器滚动条操作

 <style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        height: 5000px;
    }

    .box {
        width: 100%;
        position: fixed;
        top: 0;
        display: none;
    }


    .top {
        width: 800px;
        margin: 0 auto;
        line-height: 100px;
    }

    img {
        height: 50px;
        vertical-align: middle;
        margin-right: 30px;
    }

    input {
        height: 70px;
        width: 500px;
    }

    button {
        height: 70px;
        width: 100px;
    }

    .sidebar {
        width: 30px;
        font-size: 30px;
        position: fixed;
        right: 100px;
        top: 400px;
        display: none;
    }
</style>

百度一下

<div class="sidebar" id="sidebar">
    侧边栏内容
</div>

<script>
    // 通过id属性值,来获取标签对象
    // oDiv,就是id属性值是top的标签
    // 之间是通过id属性值,直接操作标签
    // 现在直接放在事件中,不能使用,必须要先获取标签对象
    // 语法: document.getElementById('标签id属性值');

    // 一般使用class来定义样式
    // 一般使用id来获取标签对象

    var oDiv1 = document.getElementById('box');
    var oDiv2 = document.getElementById('sidebar');
    // console.log(oDiv1 , oDiv2);

    // 通过事件来实现效果
    // window.onscroll  页面滚动条事件
    // 当页面滚动条发生改变时,会触发需要执行的程序

    window.onscroll = function () {
        // 当滚动条,也就是页面位置,发生改变时,会触发执行的程序

        // 获取当前浏览器上卷的高度
        var height = document.documentElement.scrollTop || document.body.scrollTop;

        // 如果浏览器上卷的高度,大于 500 时 , 执行程序
        if (height > 500) {
            // 设定 div 的显示属性为 block ,就可以显示了
            oDiv1.style.display = 'block';
            oDiv2.style.display = 'block';
        } else {
            // 设定 高度 <= 500 是,让div消失隐藏
            oDiv1.style.display = 'none';
            oDiv2.style.display = 'none';
        }
    }

    // 后续将jQuery时,会讲动画效果
    // 当前使用css也是可以实现,不过执行效果不如jQuery





</script>