通过setTimeout来取消因大量计算造成的网页卡顿

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

通过setTimeout来取消因大量计算造成的网页卡顿

js是单线程的,所以有些大量计算的操作会占用线程资源,导致页面卡住. 今天遇到这样一个场景,选择一个下拉框之后,对数据进行筛选,这个过程中有大量计算,点了selecte的option之后,option不隐藏,一直卡在那里,直到筛选计算完成. 这个体验非常差,于是想,能不能接触当前线程的占用,让交互看起来流畅些? 试着用刚刚触发的时候显示一个loading,然后用 setTimeout(func,0), 把计算的操作放到线程任务队列末尾,这样做果然页面操作不再卡顿了…

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

1.setTimeout致使页面的卡顿或是不流畅,打乱模块的生命周期 ,还有setTimeout其实是很难调试的. 当一个页面有众多js代码的时候,setTimeout就是导致页面的卡顿. var setTimeOut=setTimeout(function(){ console.log("延迟事件执行");},200);同样的代码在web端和APP端的执行的代码的效率会有很大的差异2.不要在setTimeOut里面嵌套setInterval,同样会导致页面的卡顿. var setTi…

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

Mouseenter在鼠标滑上去不会对其子元素也发生监听, Mouseover在鼠标滑上去会对其子元素发生监听. 所以对于事件的监听,我们要看需求,这里是对父元素的监听,不需要对子元素做监听.就用mouseenter与mouseleave. mouseenter是不会对其里面的子元素做监听,所以我们对这个li做mouseenter和mouseleave的监听就是正确的. 带settimeout的mouseover事件 function add_color(b){ var x='#'+b; var…

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算平方</title> <script> function pf(){ var input = document.getElementById("num"); console.log(input); //获…

【转】JavaScript 异步进化史

前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作,用 callback 实现,是够用的.但随着负责交互页面和 Node 出现,callback 方案的弊端开始浮现出来. Promise 规范孕育而生,并被纳入 ES6 的规范中.后来 ES7 又在 Promise 的基础上将 async 函数纳入标准.此为 JavaScript 异步进化史. 同步…

JavaScript 异步进化史

前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作,用 callback 实现,是够用的.但随着负责交互页面和 Node 出现,callback 方案的弊端开始浮现出来. Promise 规范孕育而生,并被纳入 ES6 的规范中.后来 ES7 又在 Promise 的基础上将 async 函数纳入标准.此为 JavaScript 异步进化史. 同步…