Подмена src в iframe для Ion Range Slider и RsForm

204

21 ноября 2018, 17:20

Есть калькулятор на RSForm и JS. Раньше, когда изменения происходили просто по onchange или oninput какого-либо radio/checkbox, все работало приемлемо. Сейчас к калькулятору прикручен Ion Range Slider, чтобы при его изменении происходил расчет в реальном времени.

function calc() {
  // Слайдер
  var $range = $("#rangesl");
  $results = $("#resultsl");
  var track = function(data) {
    $results.html(data.from);
  };
  $range.ionRangeSlider({
    type: "single",
    min: 1,
    max: 100,
    from: 1,
    step: 1,
    postfix: "%",
    max_postfix: "+",
    grid: true,
    grid_num: 2,
  });
  var slider = $("#rangesl").data("ionRangeSlider");
  var slvalue = slider.result.from;
  //Ссылки на ролики
  var link1 = '1';
  var link2 = '2';
  var link3 = '3';
  //Выбираем ссылку и проверяем на изменение в нужном диапазоне   
  var lnk = link1;
  var check;
  var oldcheck;
  if (slvalue >= 50 && slvalue < 80) {
    check = 2;
    lnk = link2;
  };
  if (slvalue >= 80) {
    check = 3;
    lnk = link3;
  };
  if (slvalue < 50) {
    check = 1;
    lnk = link1;
  };
  if (oldcheck !== check || oldcheck == null) {
    var x = linkf();
    oldcheck = check;
  };
  //Подмена iframe   
  function linkf() {
    ytlink.innerHTML = '<iframe width="440" height="245" src = "//www.youtube.com/embed/' + lnk + '? rel = 0 & amp;controls = 0 & amp; showinfo = 0 & autoplay = 1 & mute = 1 & loop=frameborder="0"allow="autoplay; encrypted-media" class="video_v"></iframe>';
  };

В зависимости от позиции слайдера происходит подмена <iframe src, но по src будет находится либо GIF либо YouTube короткий ролик. Сейчас тестируется на YouTube.

Проблема в том, что когда происходит перемещение слайдера, src обновляется при любом минимальном изменении, а это приводит к постоянной загрузке заново ссылки ролика, а не только когда человек попадет слайдером в нужный диапазон. На сколько понимаю это происходит потому что функция подмены src ролика, находится внутри функции калькулятора calc ();, а oninput = "calc()" постоянно заново загружает содержание калькулятора вместе с ссылкой на ролик YouTube.

 <input type="text" id="rangesl" value="" name="rangesl" oninput="calc()" />

Answer 1

Ответ найден в записи переменной в локальное хранилище через localStorage.getItem("oldcheckls"); - читает значение. localStorage.setItem("oldcheckls", oldcheck); - записывает значение.

var check;
    //Читаем локальное хранилище
    var oldcheck=localStorage.getItem("oldcheckls");
    if (slvalue >= 50 && slvalue < 80) {
        check=2; 

    };
    if (slvalue >=80){
       check = 3;
    };
    if (slvalue < 50 ){
            check =1;
           };
   if (oldcheck != check || oldcheck == null)   {
            var x = video();
            oldcheck=check;
     //Записываем в локальное хралище
     localStorage.setItem("oldcheckls", oldcheck);
   };

Функцию с подменой видео нужно вынести из общей функции, чтобы к ней было обращение только лишь когда условие выполняется.

function video () {
     var slider =$("#rangesl").data("ionRangeSlider");
var slvalue = slider.result.from; 
     //Ссылки на ролики
  var link1 = '1';
  var link2 = '2';
  var link3 = '3';
    var lnk=link1;
    if (slvalue >= 50 && slvalue < 80) {
        lnk=link2;
    } else if (slvalue >=80){
      lnk=link3;
    } else if (slvalue < 50 ){
           lnk=link1;
           };
 ytlink.innerHTML='<iframe width="440" height="245" src="//www.youtube.com/embed/' + lnk + '?rel=0&amp;controls=0&amp;showinfo=0&autoplay=1&mute=1&loop=1" frameborder="0" allow="autoplay; encrypted-media " class="video_v"></iframe>';
   };