设置提示信息框并缓存

女爷i 2022-05-13 04:58 206阅读 0赞

手机中常见的一种提示方式：弹出一个黑色的提示框，然后几秒后消失；  
原理也非常简单：创建一个dom，将显示的内容放到dom中，然后使用定时器定时，到指定的时间后删除dom。  
但是操作dom的开销很昂贵，并且也没有必要，如果只是显示同样的内容，我们不需要每次创建—删除dom，我们只需要首次创建，然后让dom显示—隐藏即可。（操作dom会触发浏览器对页面的渲染，而显示和隐藏dom树则只会影响局部的dom变动，如果使用visibility则，几乎没有没什么开销）。  
这里有一个小技巧，因为我们要不要创建dom是根据内容来决定的，但是内容一般为汉字，所以我们使用对象保存时有困难，所以我们可以使用encodeURIComponent将内容转化为字符码，这样就解决了这个问题。  
所以下面我的代码：

{ 
      cacheAlert: { 
        timers: [] 
      }, 
      tipsAlert: (word='提示框', time = 3000) => { 
        const code = encodeURIComponent(word); 
        const timers = TB.cacheAlert.timers; 
        let dom; 
        let timer; 
        // 如果提示信息还没消失 
        if (timers.length > 0) { 
        return; 
        } 
        // 如果提示的内容已经存在 
        if (TB.cacheAlert[code]) { 
        dom = TB.cacheAlert[code]; 
        dom.style.display = 'block' 
        } else {
       // 如果提示的内容不存在 
        let bodyEl = document.body || document.getElementsByTagName('body')[0]; 
        dom = document.createElement('div'); 
        dom.className = 'tips-alert'; 
        dom.innerText = word; 
        TB.cacheAlert[code] = dom; 
        bodyEl.appendChild(dom); 
        } 
        timer = setTimeout(() => { if (timer) { clearTimeout(timer); timer = null; TB.cacheAlert.timers.length = 0; } dom.style.display = 'none'; }, time); TB.cacheAlert.timers.push(timer); } }