您可以编写另一个函数，如下所示：

function applyChange(element) {
    element.style.backgroundColor = getRandomRGB();
    element.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
}

你可以这样称呼它：

function changeRGB() {
  const divs = body.querySelectorAll( `div` );

  for( let i = 0; i < divs.length; i++ ) {
    applyChanges(divs[i]); // <- Call it here
  }
}

for( let i = 0; i < 25; i++ ) {
  const div = document.createElement( `div` );

  applyChanges(div); // <- Call it here
  body.appendChild( div ); 
}

这样，您只需将div元素作为提示传递，就可以动态地使用它。

最简单的解决方案可能是：

//  div.style.backgroundColor = getRandomRGB();
//  div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;

…这是：

changeRGB();
setInterval( changeRGB, 1000 );

如果不想等待一秒钟，请在创建时删除属性生成，并手动运行该函数一次。

有几种节省代码的方法可以实现这一点。首先，我发现使用es6 arrow函数可以更清晰地处理像这样的多个函数。要直接回答您的问题，请设置 backgroundColor 及 transitionDuration 在这两个不同的功能中是相同的，并且可以外包，正如我在下面使用 applyTransform() .
还有其他节省空间的方法，例如，您可以缩短如下内容：

function getRandomRGB() {
  const colors = [];

  for( let i = 0; i < 3; i++ ) {
    const  n = getRandomNumber( 100 + 1 );   
    colors.push( n );
  }
  return `rgb(${ colors.join( '%,' )}%)`; 
}

为此：

const getRandomRGB = () => `rgb(${ [0,1,2].map(n => getRandomNumber( 100 + 1 )).join( '%,' )}%)`

现在，缩短代码并不总是最好的选择，因为它有时会使阅读和维护变得更加困难。然而，我发现这个结果比原始代码更容易阅读，同时它是16行，而原始代码是32行。

const body = document.querySelector( `body` );
const getRandomNumber = max => Math.floor( Math.random() * max )
const getRandomRGB = () => `rgb(${ [0,1,2].map(n => getRandomNumber( 100 + 1 )).join( '%,' )}%)`
const changeRGB = () => divs.forEach(applyTransform); 
const applyTransform = div => {
  div.style.backgroundColor = getRandomRGB();
  div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
}
for( let i = 0; i < 25; i++ ) {
  const div = document.createElement( `div` );
  applyTransform(div)
  body.appendChild( div ); 
}
const divs = body.querySelectorAll( `div` )
setInterval( changeRGB, 1000 );

* {

  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-wrap: wrap;
  filter: saturate( 200%);
}

section {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur( 5rem);
}

div {
  flex-grow: 1;
  min-width: 25%;
  min-height: 10%;
  background-color: #222;
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: linear;
}

<section></section>