I have a piece of text that uses Webkit's background-clip:text feature and for pure aesthetics purposes, I want to include a script to scroll through the image on the text. The one way I have thought of doing this is using setInterval and running the function I have included below. I want to know if I will run into any problems of using setInterval since I have it looping at 50ms.

Function:

function movePos(){
    var obj = document.querySelector('h1 span');
    var pos = parseInt(obj.style.backgroundPositionY);
    obj.style.backgroundPositionY = (pos + 1) + 'px';
}
有帮助吗?

解决方案

Any modern browser with even modest hardware should be able to handle executing these three lines of code 20 times per second. You should be fine.

If you want to optimize, and the obj variable won't change, you could cache that value so you're not running a selector 20 times per second. I'm not certain, but this is probably the most CPU intensive of the three lines of code.

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top