js是单线程的，所以有些大量计算的操作会占用线程资源，导致页面卡住。

今天遇到这样一个场景，选择一个下拉框之后，对数据进行筛选，这个过程中有大量计算，点了selecte的option之后，option不隐藏，一直卡在那里，直到筛选计算完成。

这个体验非常差，于是想，能不能接触当前线程的占用，让交互看起来流畅些？

试着用刚刚触发的时候显示一个loading，然后用   setTimeout(func,0),  把计算的操作放到线程任务队列末尾，这样做果然页面操作不再卡顿了

通过setTimeout来取消因大量计算造成的网页卡顿的更多相关文章

  1. 手机页面或是APP中减少使用setTimeout和setInterval，因为他们会导致页面卡顿

    1.setTimeout致使页面的卡顿或是不流畅,打乱模块的生命周期 ,还有setTimeout其实是很难调试的. 当一个页面有众多js代码的时候,setTimeout就是导致页面的卡顿. var s ...

  2. setTimeout用于取消多次执行mouseover或者mouseenter事件,间接实现hover的悬停加载的效果.

    Mouseenter在鼠标滑上去不会对其子元素也发生监听, Mouseover在鼠标滑上去会对其子元素发生监听. 所以对于事件的监听,我们要看需求,这里是对父元素的监听,不需要对子元素做监听.就用mo ...

  3. 利用JS写一个计算平方的网页

    <!-- 计算一个数的平方并显示出来 --> <!DOCTYPE html> <html> <head> <meta charset=" ...

  4. 【转】JavaScript 异步进化史

    前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...

  5. JavaScript 异步进化史

    前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...

  6. 性能优化九之UI卡顿分析

    在前一篇博客中提到内存抖动和耗时复杂的计算会导致UI卡顿. 那为什么内存抖动会导致UI卡顿呢? 其实在 性能优化一之内存与垃圾回收器 这篇文章中已经有所提及. 这里来详细说明一下: 渲染功能是应用程序 ...

  7. 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件

    目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7 ...

  8. 团队项目（第三周）—GG队

    需求改进&系统设计 队员 学号 叶尚文(队长) 3116008802 蔡晓晴 3216008808 杜婷萱 3216008809 龙剑初 3116004647 于泽浩 3116004661 一 ...

  9. Python学习笔记014——生成器Generator

    1 生成器定义 在Python中,一边循环一边计算的机制,称之为生成器(generator). 生成器是一个迭代器. 含有yield语句的函数是生成器函数,该函数被调用时返回一个生成器对象(yield ...

随机推荐

  1. 【Telerik】<telerik:RadComboBox>导出列表数据

    近来在做项目,做到导出功能.使用<telerik:RadComboBox>的下拉框来实现导出部分或导出所有数据的功能.

  2. ajax的一些笔试面试题

    1. 什么是ajax,为什么要使用Ajax(请谈一下你对Ajax的认识) 什么是ajax: AJAX是“Asynchronous JavaScript and XML”的缩写.他是指一种创建交互式网页 ...

  3. Android APK瘦身之Android Studio Lint (代码审查)

    ******** ******** 第一部分: 瘦身内容介绍 ******** ******** 项目新版本的迭代接近尾声, 因为历史累积问题, 导致有很多无效的资源让已经臃肿的APK变得更肿, 因此 ...

  4. 运行错误：error while loading shared libraries: xxx.so.0:cannot open shared object file: No such file or

    链接时可以通过-L和-l来指定自己的库,因此链接可以通过,但是运行时,系统仍无法找到指定的库,需要简单配置一下. 解决方法: 可以直接在将自己的库所在路径添加到/etc/ld.so.conf文件中.但 ...

  5. 使用THINKPHP中的控制器和模块查询数据库

    1,自定义一个UserController的控制器,导入tp的控制器与模块执行相应的操作. ----var_dump()方法是判断一个变量的类型与长度,并输出变量的数值,如果变量有值输的是变量的值. ...

  6. *HDU 1709 母函数

    The Balance Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  7. Allegro之Enhance pad Entry（增强焊盘进入约束功能）的使用

    pcb布线时,有时候会从器件的焊盘往外拉线,为了避免出现类似情况 出现锐角焊盘内绕线等等 可在add connect操作下,右键勾选Enhance pad Entry来增强焊盘进入的约束,可有效防止上 ...

  8. vim插件之tabular，代码对齐强迫症必备

    本周整理一批别人写的代码,要处理好所有的注释和缩进. 碰到那种大片的赋值或者注释或者宏定义,但又没对齐的,简直太难看了. 于是手工对了几个,觉得确实不是人干的活,心想这种需求应该有工具自动搞定才对啊, ...

  9. C语言的傻瓜式随笔（二）：全局变量、预编译、goto

    函数的作用:可以实现代码的重用. 函数只需要定义1次,那么函数中的代码就可以随意的调用.       -某不知出处的基本概念 学而时习之,如有误笔,请指正 一.goto跳转语句 goto在C语言的作用 ...

  10. jvm的内存分配总结

    最近看了周志明版本的<深入理解Java虚拟机>第一版和第二版,写的很好,收获很多,此处总结一下.   jvm中内存划分:   如上图,一共分为五块,其中: 线程共享区域为: 1.java堆 ...